Why are certain CSS properties not applied to a:visited?

css

Solution

You're not doing anything wrong - it just doesn't work that way (anymore). Styling of :visited was used as a security hole, so browser manufacturers basically eliminated alternate styling for :visited except for a handful of properties (e.g. 'color', 'background-color')

See: http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/

Problem

I have some link styles for our website and the CSS is as follows: ``` a:link { font-family: Verdana, Tahoma, Geneva, sans-serif; text-decoration: none; color: #0676b3; } a:visited { color: #666; text-decoration: underline; } a:hover { color: #fff; background: #A5C2DB; border-radius: .1875em; padding: 0 .1875em; } ``` Here is a jsfiddle to show how they are supposed to look in their different states: ``` a { display: inline-block; margin: 10px; } /* these styles are for presentation of the link states they are NOT the styles in my stylesheet*/ a.link { font-family: Verdana, Tahoma, Geneva, sans-serif; font-size: .875em; text-decoration: none; color: #0676b3; } a.visited { color: #666; text-decoration: underline; } a.hover { color: #fff; background: #A5C2DB; border-radius: 0.1875em; padding: 0 0.1875em; } ``` ``` <a class="link">Regular Link</a> <br /> <a class="visited">Visited Link</a> <br /> <a class="hover">Hovered Link</a> ``` :link = blue text no decoration :visited = grey text underlined :hover = white text with light blue background The `:link` and `:hover` work fine but for some reason the `:visited` state refuses to show the underline. in Chrome and Firefox using firebug or the inspector I can see the `:visited` style in action and the text is grey in color, only it refuses the `underline` state. Any ideas on what I'm doing wrong?

Original source