Search code examples
csstext-decorationsvisited

CSS pseudo a:link overwriting text-decoration for a:visited

For the following CSS:

a:link {color: blue; text-decoration:underline;}
a:visited {color: red; text-decoration:none;}
a:hover {color: red; text-decoration:none;}
a:active {color: red; text-decoration:none;}

The visited state changes to a red font, but the underline does not go away. It seems to be over-written by the a:link definition for text-decoration.

Currently, the only way to ensure that the visited state has no underline is by giving all states no underline as well. It must be something new because in the past, this CSS worked. Is there any way to set the a:link to underline and the a:visited to not underline?

Solution

  • I believe browsers have implemented this as a security measure. Previously one could style visited links differently and people used this to find out which sites a visitor had visited. They simply listed thousands of popular URLs on a site (hidden most likely) and checked with JS which ones were styled differently than others. This way the site owner could know which sites his visitors frequent.