We want to stylize visited links with the CSS generated content. Basically, all visited links should have a different image attached to them. Here's the CSS code:
a {text-decoration: none;}
a:link {
color: #393;
}
a:link:after {
content: url("img/normal.gif");
padding-right: 9px;
}
a:visited {
color: darkgreen;
}
a:visited:before {
content: url("img/visited.gif");
padding-left: 15px;
}
You can test if your browser renders this code correctly here. When you click on the "Back" link, you should see the following rendering:
Nice exercise and demo. Unfortunately, it will soon be obsolete. Browsers, at least Gecko and Webkit, are tightening the rules for the visited state to prevent privacy intrusions by robots of all kind. See my post to css-discuss in April 2010 and links therein.
If you test your demo in recent Chrome build or Safari nightly or Firefox (Minefield) nightly, only the color will change. The generated content is ignored.
Doesn't work in IE 8 in compatibility mode.
However, it DOES work in IE 8 WITHOUT compatibility mode.