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

css

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?

Best 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/