Subrayando enlaces visitados

Question

Dado el siguiente ejemplo: http://jsfiddle.net/A8v9x/4/ - cuando hace clic en el primer enlace y luego regresa a la página, el primer enlace se vuelve verde. Sin embargo, todavía no tiene un subrayado, aunque los enlaces visitados están declarados como text-decoration:underline;. Nada cambia incluso si agrega !important a esa regla.

No se pudo encontrar información sobre dicho comportamiento en las especificaciones de CSS. ¿Es un error de navegador común? ¿Cómo funciona uno alrededor?

Answer 1

No puede cambiar la decoración de texto en :visited. Esto está fuera de las preocupaciones de privacidad que se discuten en https://developer.mozilla.org/en/CSS/Privacy_and_the_:visited_selector. Básicamente, cambiar las propiedades calculadas puede permitir que los sitios web determinen qué sitios ha visitado un usuario.

Las propiedades CSS que se pueden usar para dar estilo a los enlaces visitados son color, color de fondo, borde - * - color, color de contorno y color de regla de columna y, cuando los estilos no visitados y visitados son colores (no pintar servidores o ninguno), las propiedades de relleno y trazo. Para las propiedades que no están permitidas (y para los componentes alfa de las propiedades permitidas, cuando se usan colores rgba() o hsla() o transparentes), en su lugar se usa el estilo para los enlaces no visitados.

Answer 2

Tuve el mismo problema ayer y encontré una solución. En los viejos tiempos solía poner los enlaces con subrayado y enlaces visitados sin, para ser más simple para que el visitante no haga clic en el mismo enlace dos veces.

Ayer tuve una sorpresa al intentar hacer lo mismo y no estaba funcionando. Perdí 30 minutos hasta que encontré en Internet que desde 2007 todos los navegadores limitaban las propiedades que puede poner en "visitado" por razones de seguridad. Son solo como 6-7 propiedades que puede configurar como "visitado". Y uno de ellos es el color del borde. Entonces pensé en establecer el subrayado en none, y usar "border-bottom-color" para subrayar. No puede establecer "border-bottom-color: transparent;" para visitado, pero puede establecer el color de borde del mismo color que el elemento principal color de fondo. Eso hará que el subrayado sea invisible una vez que se visita el enlace.

<style type="text/css"> 
body{color:black;background-color:white;} 
a:link{color:blue;text-decoration:none;border-bottom: 1px solid;border-bottom-color:blue;} 
a:visited{color:red;border-bottom-color:white;} 
</style> 

O puede hacer a la inversa (lo que está pidiendo) estableciendo el enlace border-color de la misma como fondo y un color diferente para el visitado.

demo a la inversa: https://jsfiddle.net/stfr9f9a