Cómo quitar el texto subrayado de los enlaces en HTML y CSS
Los hipervínculos de una página desarrollada en HTML son subrayados mediante una línea de color que aparece debajo del texto. Esta característica se puede quitar con la ayuda de la propiedad CSS text-decoration y su valor "none", la cual permite que el texto no presente decoración adicional.
¿Cómo quitar el texto subrayado de un link con CSS?
- Para eliminar el subrayado de un enlace concreto, únicamente tenemos que añadir el atributo style="text-decoration:none" justo antes del cierre de la etiqueta, como se muestra a continuación:
<html> <body> <h3>Hipervínculo con subrayado</h3> <a href="https://es.ccm.net">Enlace</a> <h3>Hipervínculo sin subrayado</h3> <a href="https://es.ccm.net" style="text-decoration:none">Enlace</a> </body> </html>
- Y, como podemos observar en la siguiente imagen, en el enlace que se ha añadido dicha modificación no aparece subrayado alguno:
¿Cómo eliminar el subrayado de todos los hipervínculos con CSS?
- Sin embargo, si lo que deseas es que este estilo se aplique a todos los enlaces del código, basta con añadir <STYLE>A {text-decoration: none;} </STYLE> antes de la etiqueta <body>:
<html>
<STYLE>A {text-decoration: none;} </STYLE>
<body>
<h3>Hipervínculo 1</h3>
<a href="https://es.ccm.net">Enlace</a>
<h3>Hipervínculo 2</h3>
<a href="https://es.ccm.net">Enlace</a>
</body>
</html>
- Consiguiendo, de este modo, eliminar el subrayado en todos los hipervínculos:
¿Cómo agregar un efecto de hover a los enlaces sin subrayado en CSS?
Para agregar un efecto de hover a los enlaces sin subrayado en CSS, puedes utilizar la propiedad `text-decoration: none` para eliminar el subrayado y luego agregar un estilo de hover con `:hover` para aplicar el efecto deseado. Por ejemplo:
```
a {
text-decoration: none;
}
a:hover {
/* Agrega aquí el estilo que deseas para el efecto de hover */
}
```
¿Cómo crear un estilo personalizado para los enlaces subrayados en CSS?
Hemos visto que una forma de crear un estilo personalizado para los enlaces subrayados en CSS es utilizando la propiedad text-decoration. Puedes utilizar -decoration: none; para eliminar el subrayado por completo, o puedes utilizar text-decoration: underline; para agregar un subrayado a los enlaces. Pero también puedes personalizar el estilo del subrayado utilizando text-decoration-color, text-decoration-thickness y text-decoration-style. Por ejemplo, text-decoration-color establece el color del subrayado, text-decoration-thickness establece el grosor y text-decoration-style establece el estilo del subrayado.
¿Tienes más preguntas sobre HTML y css? Consulta nuestro foro de discusión