Recipe 6.4. Placing an Icon at the End of the Link

Problem

You to display icons at the end of an inline link like the ones in Figure 6-3.

Figure 6-3. Icons are placed at the end of the links

Solution

Adding a class attribute to the links, place two values for the attributes. One value is icon while the other value describes the nature of the link. In this case, the links are for an email address and a search engine:

<a href="mailto:[e-mail]" >Quote me on an estimate</a> <a href="http://www.google.com/" >feline nolo</a>

Provide room for the icons at the end of the links by using a class selector and the :after pseudo-class with the width, margin and height properties:

a {  text-decoration: none;  font-weight: bold; } #content a.icon:after {  display: block;  width: 17px;  height: 15px;  margin: 2px; }

To place images at the end of links, use a different CSS rule for each icon.

Using the class selector and :after pseudo-class, the icons of an envelope and a magnifying glass are placed at the end of the links in two CSS rules:

#content a.email:after {  content: url(email.gif); } #content a.search:after {  content: url(search.gif); }

Discussion

The setup for this solution allows for the easy editing of the design. If an icon (for email, it's a Word document icon) needs to be added at the end of a link, first add the value document within the class attribute:

<a href="/_assets/report.pdf" >feline nolo</a>

Then add a new CSS rule to place the icon:

#content a.document:after {  content: url(doc.gif); }

There is another method that wouldn't require the additional markup of a class attribute and value. For example, use attribute selectors as discussed in Recipe 1.2 to place icons for email addresses at the end of links:

                #content a[href|="mailto"]:after {  content: url(email.gif); }

However, support for attributes selectors is limited. Also, since the solution uses content generation, it's not suitable for Internet Explorer for Windows.

See Also

Dave Shea's presentation on adding an icon with a background image in an inline link at http://www.mezzoblue.com/presentations/2006/sxsw/css/q1.html; and an explanation about why this fails in IE at http://www.brunildo.org/test/InlineBlockLayout.html.