Check marking visited links

For a little side project I'm working on I was experimenting with different ways of displaying visited links. I thought about using the method Simon Collison describes in Ticked-off visited links Reloaded, but didn't want to start creating background images.

So I started playing with the :after pseudo-element and generated content. Nope, neither works in you-know-whatInternet Explorer, but it's about time to stop letting that prevent things from moving forward. Anyway, looking through the Unicode Character Code Charts I found character 2713 (check mark), which seemed to be just what I wanted.

Inserting one of these characters after visited links would result in an effect similar to Simon's ticked off links, so I added the following (simplified) rule to the stylesheet I was working on:

  1. h2 a:visited:after {
  2. content:"\00A0\2713";
  3. }

When using unicode characters with generated content you enter a backslash followed by the hexadecimal character code. In this rule there are two characters: first a non breaking space to push the check mark away from the link text, and then the check mark.

I tested this in a whole bunch of browsers on my Mac and they all displayed the check mark just like I wanted it. Perfect! But then the trouble started.

When I opened the site in Firefox on a Windows machine there was a question mark instead of a check mark. And Opera displayed an empty square. But no check mark.

"Ok, it must be the font then", I thought and changed the font-family for the check mark to WingDings. Nope, didn't help. Tried another font. And another. Still no check mark.

Googling around a bit revealed that of course I wasn't the first to think of using generated content to insert check marks after visited links. Mike Davidson describes the same technique and similar problems in Making Visited Links Radical.

Mike notes in the comments that only Safari renders the check mark. Now, that article is from over a year ago so browser support may have improved – the proper check mark seems to display perfectly in all recent Mac browsers. No luck at all on Windows, though. Mike's workaround was to use character 221A (square root or radical sign) instead, since that seems to display properly across browsers and operating systems.

That's where I'm stuck for now. Like Mike I have resorted to using character 221A (square root or radical sign) instead of a real check mark. For a demo, check out Coffee with milk, my design for the CSS Table Gallery. Note: The table design uses a radical sign, not a check mark, so it does work in Windows browsers (except IE).

And no, that isn't the side project I was talking about earlier. More on that later.

Not being able to use any character I want is a bit annoying. This problem does not seem to be isolated to generated content either, so I was wondering if anyone has any ideas on how to make Windows browsers display proper check marks.

Posted on September 19, 2005 in Browsers, CSS, Typography