Different ways to style visited links

There’ve been interesting parallel interview about :visited pseudo-class at CollyLogic which made me redo visited links at my blog and portfolio. Here’s explanation of some techniques, and since IE is the matter of past, some of these are not supported in it.

Some basic CSS knowledge is required to successfuly follow this article. Before you proceed, please make links visited and then press F5 (or Refresh) to trigger :visited pseudo class.

Line-Through

Really simple implementation, as the only effort you have to make is one line in your CSS file:

a:visited {
    text-decoration: line-through;
}

It does something like this: visited link. Very simple to apply, but quite understanding for visitors.

Background-image

This one is also supported by most common browsers (including IE 5.5/Win and IE 6.0/Win). Some designers like to put it before actual text, but in this example we’ll position it after link text.

For that to achieve, we need some image, preferably .gif and we should make space after link text and before next word in sentence. Make a 10px × 10px .gif in your image editor of choice. The space after link text should be a bit wider than background image, so we’ll set, approx. 12px:

a:visited {
    padding-right: 12px;
}

Let’s add background-image and adjust its’ position:

a:visited {
    padding-right: 12px;
    background: url(visitedLink.gif) no-repeat 100% 50%;
}

Again we should come up with something like this: visited link.

Now that you have such neat effect i guess you’d like to add some extra magic to it. If we define:

a:visited:hover {
    background-image: url(visitedHoverLink.gif);
}

we’re on good way to impress our audience – mouse over me!.

By going a step further:

a:visited {
    padding-right: 12px;
    background: url(visitedLink.gif) no-repeat 100% 50%;
    color: #aaa;
    text-decoration: none;
}
a:visited:hover {
    background-image: url(visitedHoverLink.gif);
    color: #f00;
}

we make it even more sexy (try mouseover effect).

`:before` and `:after` pseudo elements

Now that you have more clue about possibilities, meet the ’advanced’ pseudo elements. Why advanced?

From the position of IE they’re advanced, because at the time of this writing, that browser doesn’t support them. Pseudo elements allow us more options to style visited links.

a:visited:after {
    content: " (you’ve visited this link before)";
}

will add the (you’ve visited this link before) right after main text – test link. Of course we might do something like:

a:visited:before {
    content: "(you’ve visited this link already) ";
}

and it would appear like this: test link.

Obviously, text from this example is not very practical, but you got the point. On the other hand, shorter text or notes should work fine, so let see some possibilities of styling:

a:visited:after { 
    content: " (ok)";
    font-size: 70%; 
}

smaller text after

a:visited:after {
    content: " (ok)";
    font-size: 60%;
    text-transform: uppercase;
}

smaller uppercase text after

a:visited:after { 
    content: " (ok)";
    font-size: 60%;
    text-transform: uppercase;
    color: #777;
}

smaller uppercase text after

a:visited:after {
    content: " (ok)";
    font-size: 60%;
    text-transform: uppercase;
    color: #777;
}
a:visited:hover:after {
    content: " (hey! you’ve already been there!)";
    font-size: 80%;
    text-transform: uppercase;
    color: #f00;
}

smaller uppercase text after ← mouse over, please (for some unknown reason this doesn’t work in Safari and Omniweb).

Conclusion

CSS offers various possibilities to make links more usable and preserve text readability at the same time. We need to differentiate visited and unvisited links, but we must keep text scannable and readable. Don’t forget to keep it moderate. Please, don’t misuse or overuse these techniques.

Different ways to style visited links

Line-Through

Background-image

:before and :after pseudo elements

Conclusion

More on the subject, resources and examples

`:before` and `:after` pseudo elements