CSS Formatting of Links

F

irst brought to my attention at CollyLogic

The ‘Recent Posts’ section of this site tries to do something a little different. A little more useable, a little more pleasing, a little more intuitive for the user.

If you have not visited the article to which the link is pointing, the link is shown in red. Also, the associated graphic is a sealed-envelope-type-thing; the kind of graphic your run-of-the-mill email client would show you to denote an email you have yet to read.

However, if you have previously visited the article in question the link is shown in (standard visited link colour) purple, and the graphic switches to a similarly-standard-fare-for-email-clients open envelope.

When you hover on these links, visited or not, the type changes to red and underlined, and you get a nice visual interpretation in the shape of an arrow.

Not groundbreaking, just nice.

In the immortal words of Neil Buchanan; “Go on, try it yourself.”

The CSS:

#posts li a {padding: 0 0 2px 15px; font-size:0.9em; }

#posts li a:link { color:red; background: url(/img/icons/mail_back.gif) 0 4px no-repeat;}

#posts li a:visited { color:purple; background: url(/img/icons/mail_open.gif) 0 4px no-repeat;}

#posts li a:hover { color:red; background: url(/img/icons/arrow_fat_right.gif) 0 4px no-repeat;}

#posts li a:active { color:red; background: url(/img/icons/mail_open.gif) 0 4px