Showing Hyperlink Cues with CSS

[foo] -- Has an attribute named "foo"

[foo="bar"] -- Has an attribute named "foo" with a value of "bar" ("bar")

[foo~="bar"] -- Value has the word "bar" in it somewhere ("blue bar stools")

[foo^="bar"] -- Value begins with "bar" ("barstool")

[foo$="bar"] -- Value ends with "bar" ("I was at the bar")

[foo*="bar"] -- Value has bar somewhere ("I was looking for barstools")

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.

Download zip

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:


Very helpful. Thanks!