Juglar / v.CIII

Está viendo el artículo Estilizar los enlaces: los visitados

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

Ejemplo de enlace tachado

Imagen OK:
a:visited {
padding-right: 12px;
background: url(visitedLink.gif) no-repeat 100% 50%;
}

Ejemplo de enlace con imagen ok

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

Ejemplo de enlace visitado

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

to CSS... ... 4 Junio 2006

Opciones de discusión

Hay 1 comentario

  • Gravatar Image

    Buen resumen, se le ocurren a un o muchas ideas

    Enrique 5 Junio 2006 0:22 Enlace

Deja un comentario

Todos los comentarios serán moderados antes de su publicación. Disculpen las molestias.