How to Place an Icon After a Link

Web designers often use CSS to place tiny icons after certain types of links. These icons provide the user with more information about the link. For example, an icon might alert a user that the link is to a a PDF file, or to an email program, or to a site external to the current website. Here is how to follow a link with an icon.

Instructions

Difficulty: Moderate

Things You’ll Need:

• A text editor or HTML editor
• A web page

1. This CSS technique uses the :after pseudo-class. It works in standards-compliant browsers.
2. For this example, assume that the icon will be used to indicate that the link is to a PDF file. The icon will be defined in the CSS in a class called .pdf.
3. The CSS selector is a.pdf:after. This translates to A (a hyperlink) of the class .PDF and the pseudo-class :after.
   
   The CSS rule would be
   a.pdf:after {
   content: url(pdficon.gif);
   }
   
   You must have an icon named pdficon.gif at the url given.
4. To make that work, add the class to the HTML. The link would look like
   a class="pdf" href="somefile.pdf" (inside HTML brackets, of course). Any A link of the class called pdf would get the icon defined in the CSS rule placed after the link.
   
   You may need to create an additional style rule for the a.pdf:after selector, creating the needed amount of space after the link so that the icon does not appear on top of the following word. This could be done with some padding-right. The width you allow for this would depend on the width of the icon.

Tips & Warnings

• There is also a :before pseudo-class that generates content before an element.
• Internet Explorer for Windows does not implement the :after pseudo-class. This technique will not work on IE7/Win and below. It is expected to be implemented in IE8/Win.