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>
<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;
}

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