Estilizar los enlaces: los visitados
Principalmente, un enlace (link) es una palabra o texto que al pinchar sobre él nos lleva hacia otra página web. Su estructura en HTML es tal que así:
<a href="http://URL_DESTINO" title="DESCRIPCION">TEXTO_ENLACE</a>
Si queremos que un enlace se abra en nueva ventana, añadimos target=”_blank” (vease también Los enlaces abren ventanas):
<a href="http://URL_DESTINO" title="DESCRIPCION" target="_blank">TEXTO_ENLACE</a>
Es en la hoja de estilos dónde especificamos el aspecto que mostrarán:
a:link {…}: Los no visitados.
a:visited {…} Los visitados.
a:active {…}: Los que estamos pulsando.
a:hover {…}: Sobre los que pasamos el ratón.
Por ejemplo, algo típico es plantearnos si queremos que no aparezcan subrayados (en los navegadores suelen mostrarse subrayados por defecto).
a:link {
text-decoration: none;
}
Después de esta introducción, veamos algunas formas de darle un toque especial a los enlaces, en este caso los visitados:
Aunque no todas las webs lo hacen, es importante que los estilos permitan al lector diferenciar claramente los enlaces visitados de los no visitados. El método más lógico es darles diferente color o tonalidad. Pero podemos añadir otros métodos más visuales:
Efecto tachado:
a:visited {
text-decoration: line-through;
}
Imagen OK:
a:visited {
padding-right: 12px;
background: url(visitedLink.gif) no-repeat 100% 50%;
}
Texto indicativo (no funciona en IE):
a:visited:after {
content: “(ok!)”;
}
Ejemplo de enlace con texto explicativo (ok!)
Y siguiendo esta línea, lo que uso para enlaces visitados en mis artículos (por Mike Davidson):
.contenidopost a:visited:after {
content: "\00A0\221A";
color: #DB00FF;
}
Más recursos para estilizar enlaces:
The Search for the Missing Link
WP Quicky: #1 [9rules style links page] at Low End Theory
Dynamic Drive CSS Library- Animated link underlines
arc90 lab : tools : Link Thumbnail
CSS Trickery Part 3: Using :hover to affect more than a link » Blog » Komodo Media
Mejora la usabilidad de tus enlaces con CSS - aNieto2K
Intenta - Pseudo-clase :visited
The ways to style visited links


Sindica el feed
Opciones de discusión
Hay 1 comentario
Buen resumen, se le ocurren a un o muchas ideas
Deja un comentario