Experimenting with visited links

by Matthew James Taylor on 22 April 2010

Experimenting with visited links (the ':visited' CSS pseudo-class)

Visited links are important signposts that people use when navigating the web. How we choose to style them on our website can make a big difference to the user experience. Normally unvisited links appear blue and visited links are purple, but with a little CSS trickery we can do so much more than that!

Let's start with the basics and show how to specify unvisited and visited links in our stylesheet with a simple CSS example:

a {
   /* normal link styles here */
   color:blue;
}

a:visited {
   /* visited link styles here */
   color:purple;
}

A simple 'a' is all you need to style all links. To style a visited link you just add the ':visited' pseudo-class after it. Easy!

Now you could take this one step further and do more than change the colour. What if we also cross out visited links to show that we've been there before? Here's how it's done:

a {
   /* normal link styles here */
   color:blue;
}

a:visited {
   /* visited link styles here */
   color:purple;
   text-decoration:line-through;
}

And it would look something like this: unvisited link, visited link.

Using content in visited links

Next let's actually change some content when a link is visited. To do that, this next example has a span tag inside the link that contains some extra text. You can hide the span for unvisited links and show it when its visited. Here's the HTML:

<a href="#">This link is really<span> cool!</span></a>

And here's the CSS:

a {
   /* normal link styles here */
   color:blue;
}

a span {
   /* hide the span when the link is unvisited */
   display:none;
}

a:visited {
   /* visited link styles here */
   color:purple;
}

a:visited span {
   /* show the span if the link is visited */
   display:inline;
}

And it will look like this. Unvisited: This link is really, and visited: This link is really cool!


It's time for some important notes. Internet Explorer 6 will choke on the span example above - IE6 users will never see the span's content even if the link is visited. That's a little unfortunate, but only a little. IE6 is over 8 years old, it's time to move on. You just can't help some people.

Taking it even further

The good news is that all modern browsers (Firefox, Safari, Google Chrome, Opera, and Internet Explorer 7 and above) can handle much more complicated examples. You just need to follow the two golden rules of visited-link styling:


  • You can only style elements inside a link, and
  • Only particular elements are allowed inside a link

Provided you follow the two rules above, you can pretty much do whatever you like. The first rule is because of the cascading nature of CSS itself, and the second has to do with block and inline elements. Block-level elements are not allowed inside inline elements, so an anchor tag (inline element) can only contain other inline elements. This means elements like <span>, <strong>, and <em> are good, but <p>, <h2>, <div> and other block-level elements are bad.

It's also important to note that there's nothing stopping us from changing these inline elements to blocks later with CSS, as long as every block-level element is contained inside other block.

Okay, with this knowledge in mind, let's forge ahead and see what other exciting things we can do.

Website Checklist demo »

In this visited link demo I put ticks next to links that have been visited by adding background images. This format is useful when you need to quickly see where you have been out of a list of URLs.


Shrinking Images demo »

In this example I reduce the size of image thumbnails when they have been visited. It's a great way to make the images you haven't seen yet stand out.


Collapsing Articles demo »

This demo is like a news website except once you have read a story it collapses so it take up less space on the page.


Visited Link Puzzle demo »

This is a more complicated example using a jigsaw puzzle. When you start the demo all the pieces are scattered around the page but as you click on them they fit into their position.


Well that's it for now. I hope you can see just how powerful visited links can be. Make sure you download the examples and have a play - maybe you can come up with other great ideas too.


Follow me on Twitter @mattjamestaylor

Enjoy this article?

If you find my website useful, feel free to donate any amount you wish. It will help pay for my hosting! =)

Matthew James Taylor