Underlining visited links

Question

Given the following example: http://jsfiddle.net/A8v9x/4/ - when you click the first link and then come back to the page, the first link turns green. However, it still does not have an underline, even though visited links are declared to have text-decoration:underline;. Nothing changes even if you add !important to that rule.

Could not find any information about such behavior in CSS spec. Is it a common browser bug? How does one work around it?

Answer 1

You can't change text-decoration in :visited. This is out of privacy concerns which are discussed at https://developer.mozilla.org/en/CSS/Privacy_and_the_:visited_selector. Basically changing computed properties can allow websites to determine which sites a user has visited.

The CSS properties that can be used to style visited links are color, background-color, border-*-color, outline-color and, column-rule-color and, when both the unvisited and visited styles are colors (not paint servers or none), the fill and stroke properties. For properties that are not permitted (and for the alpha components of the permitted properties, when rgba() or hsla() colors or transparent are used), the style for unvisited links is used instead.

Answer 2

I had the same problem yesterday and I found a workaround. In the old days I used to put the links with underline and visited links without, to be more simple for visitor to not click the same link twice.

I had a surprise yesterday when trying to do the same thing and was not working. I lost 30 minutes until I found on the internet that since 2007 all browsers limited the properties you can put to "visited" because of security reasons. They are only like 6-7 properties you can set to "visited". And one of them is border-color. Then I thought to set the underline to none, and use "border-bottom-color" for underlining. You cannot set "border-bottom-color:transparent;" for visited, but you can set the border-color the same color as parent element background-color. That will make the underline invisible once link is visited.

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

Or you can do the reverse (what you are asking) by setting the link border-color the same as background and a different color for the visited.

Demo to the reverse: https://jsfiddle.net/stfr9f9a