Iconize Textlinks with CSS

Where will this link take me?

Links are fun, but sometimes we don't know where they take us. With this little CSS technique a user can identify a link by it's icon, kind of. This whole thing was inspired by the "Showing Hyperlink Cues with CSS" article of Ask the CSS Guy.

The idea is pretty simple, if a link points to a .pdf file, we show the .pdf icon after the link.
Here are some more examples which i already implemented:


Extensions

e-Mail/Messaging URI schemes


Funky stuff...


Add it to your Website/Blog.

Upload the icons Folder to your Webspace and integrate the following code to your website:

<link rel="stylesheet" type="text/css" media="screen" href="iconize.css" />

Enjoy.


Compatibility

The CSS technique has been successfully tested with:
Firefox (Mac & PC), Camino, Safari, Opera (Mac & PC) & Internet Explorer 7 (6 doesn't work)