“Checkmark” Your Visited Links with Pure CSS

Published by Chris Coyier

Due to user privacy issues, more modern browsers severely limit how you are able to style :visited links, which renders this article rather useless. You can read more about it here.

checkmark-example.gif

Web browsers know which links on a page have been visited by a user (until the cache is cleared out, that is). It is up to you the designer to take advantage of that web browser's knowledge, if you choose to do so. I'm sure you don't need to guess, this all happens with CSS. If you choose to not apply any styling to links (<a> elements or "anchor" elements), most browsers have default styling that applies. Typically, blue with underline. In Firefox, visited links become purple with underline.

You can take control of the styling of these anchor elements in your CSS by targeting them with pseudo classes. The goal of this tutorial is to get a check mark preceding visited links for a nice visual indicator. You can see an example of this live on Mike Davidson's blog. We will be targeting the a:visited pseudo class, but I will include information on the other anchor pseudo classes later in this article.

The perfect scenario for a pseudo-pseudo class

Since the goal here is to add the check mark to the links, this is a perfect scenario for the "before" or "after" pseudo classes in CSS. These classes allow you to literally specify page elements and add content to them, right from the CSS. Here is an example:

blockquote:before {
    content: "From the article: ";
}

This will literally put the text "From the article: " before every single blockquote on your page. Does this muddy the waters between the separation of design and content? Well... maybe a little. But not really. Just don't think of these content additions as content, think of them as flair, a little something extra for your web design. Because this exists solely in your CSS, this isn't content that screen readers are going to see or that will make it into your RSS feed.

Do you see where I am going with this pseudo-pseudo thing?

a:visited:before {
   content:  "";
}

We can target visited links and then add content before this with this CSS statement. Now all we need to do is get a check mark in that content. This isn't quite as intuitive. You can't use regular glyphs here like you can in HTML. For example, putting &reg; will not work in most browsers. You will actually see that string of characters instead of the registration glyph. Instead you use a forward slash and the ASCII code for the character. 2713 is the code for a check mark. So we have:

a:visited:before {
   content:  "\2713 ";
}

Tada! Done! This works perfectly in Firefox, Opera, Safari and.. Oh, wait...

Internet Explorer 6 doesn't support non-anchor pseudo classes

Awww, that sucks. This is where you need to ask yourself if you care or not. I popped open Mike's blog to see if he dealt with the IE6 problem. Nope, his links just go grey and underline when visited, but forgo the check mark thing. This is a completely acceptable form of forward-enhancement in design. You use a good browser? Good for you, you get extra nice features. You use an old crappy browser? That's OK, the page will still look and read fine.

But I have my heart set on this now, let's get this done! We can do this without the use of the :before or :after selectors, let's just use the plain a:visited (which IE6 understands just fine), and style that to include the check mark. It's not going to be text, but we'll just make that check mark into a graphic and include it that way, check it out:

a:visited {
     padding-left: 14px;
     background: url(images/checkmark.gif) left no-repeat;
}

Now we can celebrate for real. Hooray! This works well in all browsers. Check out the example page.

The other anchor pseudo selectors

  • a:link - This one isn't used a whole heck of a lot because it's sort of redundant. If it's an anchor element it's a link already. The reason it exists is for specificity. You can declare styling here that will not cascade to other anchor styling like it would if you just styled the a element alone.
  • a:visited - You know this one by now. This is what you use to style links that have been visited, as decided by your browser.
  • a:hover - This is the most common. Use this to style the rollover state of your links
  • a:active - I have to admit I was confused by this one for a long time. This is the best way for me to explain it. The active state is what you see if you were to click and hold on a link. You typically will not see the active state for very long, as the page is likely whisking you away to another page. I think it can be fun for a little flair though. Sometimes just a color change on the active state is a nice little touch.

Here is a nice way to remember what the anchor pseudo classes are.