SHOWING HYPERLINK ICONS AUTOMATICALLY WITH CSS - Aug 6th, 2010

Here’s something that was featured in an Interactive Tools newsletter a long time ago but may have some interest. It describes how to display little icons next to hyperlinks that signify if that link will take you offsite, open a popup, or link to a file (as opposed to another html page). Here's how to do it using CSS in a way that's supported in IE7, Firefox, and Safari. The CSS tags automatically search out occurrences of the specific extensions and display an icon accordingly. Using a PDF as an example Add this to your CSS: a[href $='.pdf'] { padding-right: 18px; background: transparent url(icon_pdf.gif) no-repeat center right; } and instead of just the link, check this out you’ll get: check this out (followed by the pdf icon you uploaded) The same is true for many other extensions. Just replace the pdf with the ones you want. You can use this for e-mail links that begin with mailto with: a[href ^="mailto:"] { padding-right: 20px; background: transparent url(icon_mail.gif) no-repeat center right; } And for popup windows and many other uses. You can find the original article at: http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html Where there’s also a link to a zip file of various icons.

Terms of Service