Cómo quitar el texto subrayado de los enlaces en HTML y CSS

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 raya 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:
Quitar subrayado en HTML y CSS
© Libre de derechos

¿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:
Quitar subrayado en HTML y CSS
© Libre de derechos

¿Tienes más preguntas sobre HTML y css? Consulta nuestro foro de discusión

Alrededor del mismo tema

Webmaster