Listado completo de tutoriales

27 - Eliminar el subrayado a un enlace "a" por medio de las pseudoclases


Otra actividad común en gran cantidad de sitios es eliminar el subrayado a los enlaces con el objetivo que la página tenga mejor estética. A esto lo podemos hacer configurando las pseudoclases:

a:link {
  text-decoration:none;
}

a:visited {
  text-decoration:none;
}

Accedemos a las pseudoclases link y visited e inicializamos la propiedad text-decoration con el valor none.

Probamos la solución en esta página:

<!DOCTYPE html>
<html>
<head>
  <title>Problema</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<a href="http://www.google.com">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.bing.com">Bing</a>
</body>
</html>

La hoja de estilo es:

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
quitar subrayado a un ancla

Es decir, configuramos la propiedad text-decoration con el valor none, por defecto está configurada con el valor underline.

Tener en cuenta que podemos agrupar la regla de esta forma:

a:link, a:visited {
  text-decoration: none;
}

Retornar