Showing Hyperlink Cues with CSS (Ask the CSS Guy)

The 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. 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

Thisone is also supported by most common browsers (including IE 5.5/Win andIE 6.0/Win). Some designers like to put it before actual text, but inthis example we'll position it after link text.

For that toachieve, we need some image, preferably .gif and we should make spaceafter link text and before next word in sentence. Make a 10px X 10px.gif in your image editor of choice. The space after link text shouldbe 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 IEthey're advanced, because at the time of this writing, that browserdoesn't support them. Pseudo elements allow us more options to stylevisited 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. Onthe other hand, shorter text or notes should work fine, so let see somepossibilities 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

CSSoffers various possibilities to make links more usable and preservetext readability at the same time. We need to differentiate visited andunvisited links, but we must keep text scannable and readable. Don'tforget to keep it moderate (as Cameron Moll, the Worn Master Jedi often says). Please, don't missuse or overuse this techniques.