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.
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 X 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 elementsNow 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%; }
a:visited:after { content: " (ok)"; font-size: 60%; text-transform: uppercase; }
a:visited:after { content: " (ok)"; font-size: 60%; text-transform: uppercase; color: #777; }
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).