A neat way to spice up your pages and provide very precise navigation help is to use the little known “attributes” capabilities of CSS. What this does is provide a way for you to attach certain effects to specific types of elements. For instance, say you’d like to place the Adobe PDF  icon next to every link that ends with .pdf:

/* For PDFs */
a[href $= '.pdf']{
    padding-left:20px;
    background: transparent url(pdf.gif) no-repeat scroll left top;
}

Let’s take a look at this to see how it works:

• The a[href $=’.pdf’] aspect is stating that all ‘a href’ tags where the suffix is .pdf to attach the following formatting to it
• The padding-left: 20px; allows for the room needed to place the icon (you can pad left or right depending on where you want the icon displayed)
• The background: tag outlines the parameters for how and where and location of the icon using standard CSS

You’ll notice the $ before the =, this is specifying that we want what is at the end of the href.  There are more tags like this to specify different locations.

• $=   End of String
• ^=   Beginning of String
• ~=  String contains the word and is separated from other words by spaces.
• *=   String contains the word. (doesn’t have to be separated by spaces)

So, armed with this you can make one modification to your CSS file and affect many elements of your pages. Another example of this would be to add an icon to all ‘mailto’ links. Like this:

/* For Emails */
a[href ^= 'mailto']{
    padding-left:20px;
    background: transparent url(mail.gif) no-repeat scroll left top;
}

Here, the ^ symbol means to search for the ‘mailto’ at the beginning of the href string. Then, attach the icon to all the links that qualify only.

Let’s say you want to add an icon to all links that are scheduled to open in a new window:

/* For external links */
a[target = '_blank']{
    padding-left:20px;
    background: transparent url(external.gif) no-repeat scroll left top;
}

Notice that instead of ‘href’ it states ‘target’ which is the method used for determining if a hyperlink is going to open in a new window or in the same window, etc. This CSS command applies just to those hyperlinks that state target=”_blank”.

You can also specify a certain class in the event that you have different styles set up for your various hyperlinks. This method lets you do the following:

/* For popups */
a[class ~= 'popup']{
    padding-left:20px;
    background: transparent url(popup.gif) no-repeat scroll left top;
}

Even if you don’t create different classes for your hyperlinks but would like to have icons next to some of them you can simply assign the class tag to the hyperlink and it will merely add the icon without changing any of the other formatting.

For best results we recommend you use very small icons of 16 x 16 or less. Otherwise they could cause messy looking text lines if your hyperlinks are located within paragraphs.