Blog and Web

Dar estilo a los links visitados con CSS

Como muchos saben, mediante CSS es posible manejar la apariencia de los links, ya sean activos, al pasar el mouse encima y los visitados. Y en este artículo te mostraremos algunas opciones de estilos para los links ya visitados en nuestro sitio y de este modo ayudar a nuestro usuarios a diferenciar lo que ya vio de lo que no.

Efecto: Tachado
Ejemplo: Link visitado
Código:

a:visited {
text-decoration: line-through;
}

Es un efecto sencillo pero efetivo.

Efecto: Subrayado personalizado
Ejemplo: Link visitado
Código:

a:visited {
border-bottom: 1px dotted #6c6c6c;
text-decoration: none;
}

Sencillo y personalizable.

Efecto: Icono lateral
Código:

a:visited {
padding-right: 12px;
background: url(https://bp0.blogger.com/_Zuzii37VUO4/RliVkJya0kI/AAAAAAAABks/zwQFwD937-g/s1600/icono-visitado.gif) no-repeat 100% 50%;
}

Es una forma más gráfica y muy personalisable.

Efecto: Texto indicativo.
Ejemplo: Link visitado YA VISITADO
Código:

a:visited:after {
content: " (YA VISITADO)";
font-size: 60%;
text-transform: uppercase;
color: #777;
}

Este método usa pseudoelementos, por lo que no funciona en las versiónes anteriores de IE7.

Son métodos faciles de utilizar y muchas veces muy utiles.

Encuentra más sobre esto en maratz