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:


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" />



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