Showing Hyperlink Cues with CSS
I like the little icons next to hyperlinks that signify if that link will take me offsite, open a popup, or link to a file (as opposed to another html page). Here's how to do it in a way that's supported in IE7, Firefox, and Safari.
Images
First, find some nice little icons (or better yet, create them yourself) in gif format that will be used as the cues. It might be easier for them all to be the same size (the ones below are 14 x 16) and have a transparent background.
 |
Links to popup window |
 |
Links to external sites |
 |
Indicates a mailto: link |
 |
Links to pdf files |
 |
Links to Word files |
 |
Links to Excel files |
Example 1 - link to pdf file - HTML
As an example, we'll start with the link to the pdf file. Take a look at the following html:
<a href="files/holidays.pdf">View Holidays</a>The link it generates might look something like this:
Notice there are no classes, ids, etc. that distinguish this link from any other. The only reason we know that it leads to a pdf file is that the last bit of the href attributes value ends in ".pdf".
With some new CSS selectors that are supported in IE7, Firefox, and Safari, you can apply style declarations that are based on the values within tag attributes.
Example 1 - link to pdf file - CSS
If we apply the following styles to the html above:
a[href $='.pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}We would get something like this:
How does it work?
The above CSS rule looks for all a tags whose href attribute ends in ".pdf", then gives it some extra padding on the right of the link to make room for a small pdf icon as a fixed position background image. The dollar sign is what means "end". Since the href in the html has a value of "files/holidays.pdf", it will match the above CSS declaration, and the little pdf icon will be visible next that link.
Example 2 - mailto: links
Easy enough. Now what about the mailto: link? Take the following html:
<a href="mailto:billg@microsoft.com">Contact Me</a>and apply the following style:
a[href ^="mailto:"] {
padding-right: 20px;
background: transparent url(icon_mail.gif) no-repeat center right;
}Notice the caret (^) in the rule. The caret and equals sign means "starts with". The rule looks for all a tags whose href starts with "mailto:", then gives that link some extra right padding to display a small mail icon as a background image.
Here is the result:
Example 3 - Links to popup windows
Developers who separate markup from behavior should be linking to popups in a very web standards fashion - using a value of something like "popup" as a class or rel attribute in the link. Like so:
<a class="popup" href="help.html">Help Page</a>Use that same class or rel to show our little icon.
a[class ="popup"] {
padding-right: 18px;
background: transparent url(icon_popup.gif) no-repeat center right;
}The rule looks for all a tags whose class is set to "popup", then gives that link some extra right padding to display a small popup icon as a background image.
Finding one value out of many
But what if we have multiple class or rel values? Like in the following example html:
<a class="popup specialstyle" href="help.html">View Help</a>Now class doesn't equal "popup", but instead equals "popup specialstyle". So the rule above won't work. It'd be nice to have a way to see values that might be separated by spaces. You can by using the following:
a[class ~="popup"] {
padding-right: 18px;
background: transparent url(icon_popup.gif) no-repeat center right;
}That tilde (found in the top left of most keyboards, requires shift key) and the equal sign together means "look for this word separated from other words with spaces". Perfect for trying to match one value when there are several present.
In Summary
These selectors aren't new, and the ones mentioned here are far from a comprehensive list. What's new is IE7, and so I cherry-picked a few CSS selectors that I knew worked in IE7 and other modern browsers, and knew those are useful for the above effects. If it helps for you to see the code and have some images to play with, you can download the zip which has some examples.
(After thought: I could've attached a zip file icon to the "download the zip" link above, but chose not to. After all, I tell you it's a zip already - no icon is really needed.)
Dec 22, 2006: I think my example above regarding the class attribute was ill-chosen, as it is much easier and better supported to target tags by class by simply using tag.classname selection method rather than tag[class="classname"]. (I can't believe I didn't think of that while writing the article.) I guess it shows that, like in mathematics, there is more than one way to reach the answer.
Dec 29, 2006:If you like this article and the effect it describes, you may also like a more recent article I've written about hyperlink cues called Hyperlink Cues with Favicons.
Jan 9, 2007: For this to work in IE7, make sure you specify a the right doctype. (see Aug 23, 2007 updated below).
Jan 21, 2007: If you're looking for more icons to implement, Alex provides a nice start.
Jan 25, 2007: It was pointed out to me that for links that span two or more lines, IE doesn't display these links as intended. Because the background position is set to "no-repeat center right;" it's centering the icon between two lines. Consider putting the icon on the left side and use position of "top left" if you see yourself possibly encounterting multi-line scenarios.
Aug 23, 2007: Florian has notified me that which doctype you choose is important to IE7. He writes:
This page helped me a lot: http://hsivonen.iki.fi/doctype/
I have now reconfigured my web server to add "http://www.w3.org/TR/html4/strict.dtd" to the doctype and now it works perfectly.
Basically, if FF says from page information that it's in Quirks mode, then IE7 will fail ... so if you look at the doctype table above, then you'll find that any doctype that leads to quirksmode is deathmode for IE7.
Hope this information is helpful for you, too.
Very helpful. Thanks!