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.