• RSS
  • Print this article!
  • Digg
  • del.icio.us
  • DZone
  • Facebook
  • Mixx
  • Google Bookmarks
  • Design Float
  • Reddit
  • StumbleUpon
  • Technorati
  • Live
  • TwitThis
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.

Download Example

 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>

 

Download Example

 

  • RSS
  • Print this article!
  • Digg
  • del.icio.us
  • DZone
  • Facebook
  • Mixx
  • Google Bookmarks
  • Design Float
  • Reddit
  • StumbleUpon
  • Technorati
  • Live
  • TwitThis
Author: Shawn Categories: CSS, Front End Development, How to Tags: , , ,
  1. Anoop
    August 3rd, 2009 at 03:02 | #1
    Reply | Quote

    This is superb!

    Just one question though. Why .gif? (and not .png)

  2. Shawn
    August 3rd, 2009 at 11:07 | #2
    Reply | Quote

    You can use pngs if you like. Just picked gifs arbitrarily as I was doing it on a white background so it didn’t matter about transparency.

  3. andrew hilton
    August 3rd, 2009 at 12:21 | #3
    Reply | Quote

    it’s all very nice, but it still doesn’t work in ie6…

  4. Shawn
    August 3rd, 2009 at 12:37 | #4
    Reply | Quote

    Well aware that it doesn’t work in IE6. Actually wrote a bit of a disclaimer in there. IE6 is on it’s way out, (youTube stopped supporting it…YAY) so this will be for future use if you haven’t taken the leap to kill IE6 yet.

  5. Fabien
    August 3rd, 2009 at 21:02 | #5
    Reply | Quote

    My pet theory is that IE7 will die long before IE6. So far my Apache logs agree with me (IE7 is slowly replaced by IE8, while IE6 doesn’t move much.)

  6. Shawn
    August 3rd, 2009 at 22:22 | #6
    Reply | Quote

    Interesting theory. I’m praying that you’re not right, but I’m feeling you could very well be. Developers need to come up with an error page for IE6 browsers to force them to upgrade.

  7. B. Moore
    August 4th, 2009 at 22:15 | #7
    Reply | Quote

    @Fabien thats crazy… I am going to check the logs on my sites.

    Thanks for the great tut!

    sure would be nice to NOT have to fill out the DAM CAPTCHA on every comment I make! How the hell can i tell if a C is a G if there is a line over the middle of it???? ANNOYING AS HELL!

  8. Shawn
    August 4th, 2009 at 22:35 | #8
    Reply | Quote

    Ya I hear ya. Captchas suck I know. It sucks getting crazy amount of spam too. I’ll see if I can’t find a better captcha.

  9. Jon
    August 5th, 2009 at 09:51 | #9
    Reply | Quote

    Good use of CSS selectors – thanks for sharing.

    My one concern is that the reason I put an image in front of PDF links and external links for example is for accessibility and to let screen readers know what will happen before they click on a link (by adding alt text to the image). By using background images instead, this cannot happen. The Javascript method doesn’t work for that either, as most screen readers don’t enable Javascript, as I understand it.

    That said, I love the idea of not having these images within the HTML…

  10. NRC
    September 20th, 2009 at 14:21 | #10
    Reply | Quote

    I would just add that this is CSS 3 that you are using. These are new selector options they have added. Good tutorial.

  11. Willix
    October 28th, 2009 at 10:28 | #11
    Reply | Quote

    Great Tutorial!
    Thanks for Sharing it with te world

    Keep up the good work :)

    Regards, Wilco

  12. ilaçlama
    November 4th, 2009 at 08:01 | #12
    Reply | Quote

    this sample good…

    target=”_blank” xhtml error why ?

  13. Shawn
    December 11th, 2009 at 08:28 | #13
    Reply | Quote

    xhtml strict doesn’t allow it for some reason…you need to use transitional.

Comments are closed.