Home > CSS, Front End Development, How to > Making Hyperlink Icons with CSS

Making Hyperlink Icons with CSS

August 2nd, 2009


You have often seen hyperlinks that have little icons beside them to let you know where they link to.  In this tutorial we will show how to handle this using only CSS.

 

Beautifying Hyperlinks

Hyperlinks can link to any number of different sources (pdfs, emails, external links, popups). By placing an icon beside each of these types it will take the surprise out of clicking on a hyperlink for the user.  The plan is to do this in an intelligent manner so users don’t have to worry about placing a class on each link.  This is especially handy if you’re building for CMS users that aren’t HTML savvy.

 hyperlink icons

A couple of notes.  The CSS we will be using doesn’t work in IE7 unless you’re using a strict doctype. Also this does not work in IE6 (surprise, surprise), you will have to use JavaScript if you want it to work.  Personally I usually use strict doctype and IE6 is dying, so I think it’s a viable solution for future use.

 

Creating the Hyperlinks

We will just need to create some plain jane anchor tags, like you’ve done a million times before.  All the magic lies in the CSS. It will create the icons without having to do anything special with your HTML.

Here is the HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- Be sure to use Strict doctype for IE 7 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Hyperlink Icons</title>
    </head>
   
    <body>
        <p><a href="#Top">Anchor Tag</a></p>
        <!-- target="_blank doesn't validate using strict mode.
            You can use rel instead but you're going to have to
            write some JavaScript to make it work-->
        <p><a href="http://www.google.com" target="_blank" rel="external">External Link</a></p>
        <p><a href="mailto:test@test.com">Email Address</a></p>
        <p><a href="http://www.devirtuoso.com/file.pdf">PDF</a></p>
        <p><a href="#"class="popup otherClass">Popup</a></p>
    </body>
   
</html>

 

How the CSS is Going to Work

The magic lies in the CSS selector.  We’ll be using a selector that is similar to regular expression.  So for example, you can specify that you want to style any item that has an href value that ends, starts, or contains a specific value.  This opens up a world of possibilities.

css description

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)

 

Building the CSS

Now that we have a basic understanding of how this is going work, lets jump in and get our hands dirty.  We’re going to create a style for each anchor tag that we created earlier.

Here is the CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/* Generic Styling */  
body{
    font-family: Arial, "MS Trebuchet", sans-serif;
}
a{
    color:#57c;
    text-decoration:none;
}
a:hover{
    color:#c75;
    text-decoration:underline;
}


/* For internal tags e.g. #backToTop */
a[href ^= '#']{
    padding-left:20px;
    background: transparent url(internal.gif) no-repeat scroll left top;
}

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

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

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

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

 

Bringing it All Together

I encourage you to get out there and experiment with this.  There are so many possible uses for these selectors.

Here is the code all together:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Hyperlink Icons</title>
    <style type="text/css" media="screen">
        body{
            font-family: Arial, "MS Trebuchet", sans-serif;
        }
        a{
            color:#57c;
            text-decoration:none;
        }
        a:hover{
            color:#c75;
            text-decoration:underline;
        }
        a[href ^= '#']{
            padding-left:20px;
            background: transparent url(internal.gif) no-repeat scroll left top;
        }
        a[target = '_blank']{
            padding-left:20px;
            background: transparent url(external.gif) no-repeat scroll left top;
        }
        a[href ^= 'mailto']{
            padding-left:20px;
            background: transparent url(mail.gif) no-repeat scroll left top;
        }
        a[href $= '.pdf']{
            padding-left:20px;
            background: transparent url(pdf.gif) no-repeat scroll left top;
        }
        a[class ~= 'popup']{
            padding-left:20px;
            background: transparent url(popup.gif) no-repeat scroll left top;
        }
    </style>
</head>

<body>
    <p><a href="#Top">Anchor Tag</a></p>
    <p><a href="http://www.google.com" target="_blank" rel="external">External Link</a></p><!-- target="_blank doesn't validate using strict mode"-->
    <p><a href="mailto:test@test.com">Email Address</a></p>
    <p><a href="http://www.devirtuoso.com/file.pdf">PDF</a></p>
    <p><a href="#"class="popup otherClass">Popup</a></p>
</body>

</html>

 

 




Top