Search code examples
htmlcsshyperlinkpseudo-class

Mystery in visited and unvisited links

My question is very short.

For what reason text-decoration was removed from both visited and unvisited links, but red color applied only to unvisited link?

I.e. why these properties treated differently?

Tested in Chrome and Firefox.

<p><a href="http://goooooooogle.com">Don't click it, so it should stay unvisited</a></p>
<p><a href="#">Click it, to make it visited</a></p>

<style>
  a:link {
          text-decoration: none;
          color: red;
  }
</style>

Solution

  • Unlike color, text-decoration is not among the list of properties that can be changed with the :visited pseudo-class (see MDN).

    This results in visited links using the same text decorations that are applied to unvisited links. You cannot work around this.