Dentro de una página web podemos quitar los subrayados de los enlaces de texto. Para ello utilizaremos las pseudo-clases de vínculo: link, visited y active. Link hace referencia a aquellos enlaces que no han sido visitados todavia, visited son los enlaces visitados (las aplicaciones pueden decidir que un vinculo, pasado un tiempo, pase a estar sin visitar) y active son los enlaces que se estan cargando en un determinado momento.

a:link {color:blue;}
a:visited {color:red;}
a:active {color:cyan;}

Como en CSS1 las pseudo-clases de vínculo solo afectan al elemento de enlace A podemos obviar el selector en su descripción.

:link {color:blue;}
:visited {color:red;}
:active {color:cyan;}

La propiedad que nos permitirá modificar estas pseudo-clases será text-decoration, la cual podrá tener los siguientes parámetros:

• none, sin decoración.
• underline, con línea de subrayado.
• overline, subrayado superior.
• line-through, texto tachado.
• blink texto parpadeante.

De tal manera que nosotros usaremos el valor none para eliminar el subrayado y underline para volverlo a subrayar.

Nuestras pseudo-clases tendrán la siguiente forma:

a:link {text-decoration:none; color:blue;}
a:visited {text-decoration:none; color:red;}
a:active {text-decoration:none; color:cyan;}

A partir de CSS2 están definidas las pseudo-clases dinámicas, dentro de las cuales econtramos hover que equivale a cuando el usuario está apuntando (no activando) a un enlace.

Así, por ejemplo, podemos hacer que cuando se apunte al enlace aparezca el subrayado.

a: hover {text-decoration:underline;}

Tanto las pseudo-clases ede vínculo, como las pseudo-clases dinámicas pueden estan en selectores contextuales. Estas concatenaciones de selectores nos servirán para, por ejemplo, eliminar solamente los enlaces que esten contenidos en otro selector.

Veamos como quitar los subrayados de enlaces que estan dentro de listas.

li a:link {text-decoration:none; color:blue;}
li a:visited {text-decoration:none; color:red;}
li a:active {text-decoration:none; color:cyan;}