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!


This post was ported from an old host and CMS, so many comments were lost. Below are the comments that I found were most helpful regarding this post that I salvaged. Some links or attributions may not be working correctly.


I just wanted to point out the fact (I skimmed through the article so forgive me if it’s mentioned somewhere and I just missed it) you can use any HTML attribute as a selector, and that’s really where this technique shines. For instance, a more common use of the attribute selector in the context of your popup example would be:
a[rel=”popup”] {
padding-right: 10px;
background: url(popup.gif) no-repeat right;
}
Then, all you have to do is add a rel=”popup” in you HTML href.

This article was ported from an older CMS, and comments were purposefully lost in the migration. If some were found most relevant, I pasted them to the bottom of that post. No new comments are accepted on these older articles.

One Response to Showing Hyperlink Cues with CSS

  1. Pingback: 6 Free Tools Every Web Designer Needs - Best Web Design Tips