Add Progressive Icons to Your Site Using :after pseudo-element

By   |  Stashed in HTML/CSS
34

progressive-icons-large

Preview & Files

Before we get started, check out a preview of what we are trying to accomplish, and grab the files to follow along. Ideally enough, the previous sentence was a preview in its own right.

Overview

Lately, I’ve been getting more and more into designing with progressive enhancements in mind. I think it’s a combination of forward wishful thinking, and a spiteful attitude towards IE. It’s also encouraging that over 67% of this blog’s readership browses through on Firefox, and only 13.5% do so in IE. No doubt that’s shifted my thinking and gives me the confidence to play around with some of the cool new features of CSS3.

In the steps that follow I’ll show you how to add descriptive icons to your links using a CSS pseudo selector element. Pseudo selectors were introduced back in CSS 2.1, but the fine folks at IE still haven’t adopted them. This small progressive enhancement greatly improves a site’s usability by helping the user understand what type of link they would be clicking. In the end I’ll reluctantly show you how to make things work in IE using a background image.

How It’s Done

In the demo, I styled PDFs, Word docs, and external links, but conceivably you could assign an icon to any file extension that you can think of. First, you’ll need an icon. There are lots of places to find cool icons, but my overwhelming favorite has become Iconfinder.

After grabbing the icon that you need, you can assign it to a file type in the CSS. Let’s take a look at the styling for PDF’s…

1
2
3
4

a[href$='.pdf']:after {
	content: url(../images/pdf.png);
	margin-left: 3px;
}

Awesomely enough, this syntax will work in just the way you might imagine. We tell the css to look for any files that end in .pdf and assign an image with a 3px margin on the left.

It’s beautifully simple, and in an ideal world that would be all you’d have to code. I suppose if you consider the very nature of progressive enhancements we could stop there. Afterall, the site will look just fine in IE, and those users will never know the icons should be there at all. But considering the somewhat depressing general browser statistics for June 2009 we should probably push further.

Getting IE to Behave

So how do we get things working in IE? Well, first we have to offer up a new stylesheet if the browser is determined to be IE. To do so, we can drop this handy little if statement in the head of our document.

1
2
3

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->

The CSS is also pretty simple; we just use a background image instead of a pseudo selector. Take a look…

1
2
3
4

a[href$='.pdf'] {
	background: transparent url(../images/icons/pdf.png) no-repeat center right;
	padding: 0 20px 0 0;
}

The IE Issue

The main drawback with using a background image with a position ‘right’ attribute is how the styling breaks down if the link extends to more than one line. Despite this setback, the icons look good most of the time in IE and will only really be an issue on skinny columns. Perhaps this is best described with an illustration.

ie-issue

Showing A Little Class

With the way the selectors are set up for external links, the css will drop an icon in for any outgoing link. Which looks great on text links, but looks ugly on image links. Check out the example below…

image-icon-example

To fix this, you could make a class for your images that overrides the selectors. Then you’d have to assign that class to all your outgoing image links. Like so…

1
2
3
4

.noicon:after {
	content: ""!important;
	margin-left: 0px !important;
}

And in your IE specific stylesheet you’d use.

1
2
3
4

.noicon {
	background: none !important;
	padding: 0 !important;
}

Lastly, you’d add this to your image links.

1

<a href="yourlink" class="noicon" ><img src="yourimage" /></a>

Final Thoughts

Are you starting to use progressive enhancements on your site? What CSS3 changes are you most excited about?

About the Author

Andrew is a primary contributer for MyInkBlog. He is a full time web developer for Niagara University. When he's not working there, he's a blogger, twitter'er, wordpress'er, silverstripe advocate, blessed father and husband.

More posts by

Website      

  • http://twitter.com/digideth B. Moore

    “Which looks great on image links, but looks ugly on image links.”

    I am confused as to what in the hell your are trying to say???

    How about another visual example like you did earlier in your post….

    please! :)
    .-= B. Moore´s last blog ..digideth: wow its only 73 degrees in #STL MO and its the middle of July… unreal! Just hate being stuck in this windowless office :( =-.

  • http://www.myinkblog.com Andrew Houle

    @B. Moore – Thanks for catching that confusion. I’ve added a visual example and the code to get that working.

  • http://www.insidethewebb.com/ Jake Rocheleau

    Very nice tutorial, pretty easy to follow and yeilds some great results.
    .-= Jake Rocheleau´s last blog ..Interview with Digg-Clone for Designers DesignBump =-.

  • Jason

    that’s almost what iconize does: http://pooliestudios.com/projects/iconize/

  • http://www.gigglecomputer.com Phaoloo

    Oh, it’s a nice tip mate although you can make it easily :D. Thanks.
    .-= Phaoloo´s last blog ..Keep And Use Your Passwords Safe And Effectively Using KeyPass =-.

  • http://ad1987.blogspot.com AbhiTechBlog

    Awesome. But how should we code external links? Something like Wikipedia.

  • http://www.cryode.com Eric Roberts

    Please keep in mind that CSS attribute selectors and the :after pseudo-selector do NOT work at all in IE6. If you’re interested in using this technique for a client or yourself, and you prefer universal support for a browser that still has a lot of users (much to most developers’ disappointment, including myself), you should use a Javascript solution. Most of the CSS selectors will port over to jQuery or Mootools easily.
    .-= Eric Roberts´s last blog ..From our Portfolio: SecretTweet =-.

  • http://www.myinkblog.com Andrew Houle

    @Eric – If you read through the tutorial you will see that the second half is dedicated to getting icons to show using a background-image in IE. There is no need to use a javascript solution.

  • http://maddon.net/blog Madeline Ong

    Good post — succinct and informative. But I wonder why you would need the noicon class (which would be a hassle to add to every image link). Any reason why you wouldn’t disable the icon feature for all the image links?

  • http://www.magmag.biz Brant

    Very nice tutorial with a great end result.
    .-= Brant´s last blog ..Online Productivity Tools =-.

  • http://www.3232design.com Richard

    Nice tutorial! I’m going to have to start using this. But couldn’t you solve the breaking line problem in IE with background-position: right bottom; instead of right center? Alternatively, you could place the icon in front of the link rather than after the link, guaranteeing that it would appear on the first line.
    .-= Richard´s last blog ..Art opening July 5 at Anodyne Cafe =-.

  • http://fuelyourcoding.com Doug Neiner

    Andrew, I think skinny columns are less of an issue than line wrap at the end of a paragraph. I didn’t test to see how it would work in IE, but maybe adding a white-space: nowrap to the IE specific rule would help.

    Also, having analytics really helps these decisions. Like you said, 67% of your readership will see the new styles. You cover most of the rest of them with a close solution. When dealing with clients, analytics of their site usage can really help make these decisions easier.

    Great post!

  • http://www.kristofcreative.com Kristof

    This is an interesting technique. I’ve been using the iconize stylesheet (which uses the background property) for some time and works great. Which brings up the question, if you need to serve IE a different stylesheet that uses the background property to show the images, why not just use only that sheet? Seems to me it would make everything much easier.

  • http://www.myinkblog.com Andrew Houle

    Thanks for the good discussion and suggestions!

    @Richard – I think I remember trying that positioning and it not working. But logically that made sense to me as well.

    @Doug – Interesting call about the nowrap attribute, I’ll give that a try the next time I use this. I totally agree on analytics. It’s awesome to have the stats to back up your decisions. I handle a lot of questions about screen resolutions using those kinds of stats.

    @Kristof – I just like separating those types of things. It keeps my stylesheets cleaner.

  • http://www.webdesignbooth.com Dicky

    A very good tutorial on using CSS pseudo selector to display the icon. It is good to let readers know where will them be redirected to before they open the link.
    .-= Dicky´s last blog ..65 Absolutely Cool And Creative Twitter Backgrounds =-.

  • http://tutorijali.hdonweb.com/ Ivan MiÅ¡ić

    Very nice tutorial :-) Nice to know
    .-= Ivan MiÅ¡ić´s last blog ..Tutorijali HDonWEB v2 – novi dizajn =-.

  • http://www.perigee-art.com Rob W

    Very nice technique indeed. I will be using this. Thanks for taking the time to write this up. I’ve just discovered your blog and will definitely be stopping back in.

    Cheers,

  • James

    Nice tutorial, but the icons don’t show up for me in IE7.

  • http://www.tomascamusso.com Tomás

    Very clever technique, thanks !

  • http://www.arpia.be Peter Craddock

    Interesting: I was actually working on that just a couple of weeks ago for a new webboard, as I had done something similar for my own website.
    Good to see more people spread the use of the technique!
    I have borrowed some graphical elements of your icons to improve mine. Thanks ;)
    .-= Peter Craddock´s last blog ..Droïdes launched! =-.

  • http://www.imsethstevenson.com Seth Stevenson

    This is the first CSS trick in a while that I’ve actually been excited to go out and try! Thanks!

  • http://bradfordsherrill.com Bradford Sherrill

    good for usability

  • http://www.corlu.org haberler

    great job man.Thank you

  • Rounin

    @Andrew – I can also verify that this tutorial does not apply to IE6. Yes, the latter half may work for IE7+, but not below.

  • Rounin

    A good but slightly ugly fix for IE6 would be to use the following to the IE CSS.

    a.pdf span {
    background:transparent url(../images/pdf.png) no-repeat center right;
    padding: 0 20px 0 0;
    }

    Then in the HTML add a span tag around the last word inside the anchor tag. This will also allow the icon to wrap with the text.

    Using “white-space:nowrap” will break many pages (e.g. floats), especially if the anchor tag is very long.

  • http://www.cryode.com Eric Roberts

    @Andrew – as Rounin just reaffirmed, I specifically mentioned Internet Explorer 6, not IE as a whole. IE6 simply has no support for CSS attribute selectors ([href$='.pdf'], etc).

    Rounin’s slight HTML “hack” can also work but will require additional markup. Using Javascript is my recommended solution, since you won’t be required to use a conditional background image for any IE (although you still may need some tweaking to get the images to show up exactly where you want – margins and padding can be finicky).
    .-= Eric Roberts´s last blog ..From our Portfolio: SecretTweet =-.

  • http://gandrwebdesign.com/ Garrett Winder

    Great article – I’ve been nerding for years and didn’t come across this little gem until about a month ago. Love this stuff. Good job!
    .-= Garrett Winder´s last blog ..An update from your local nerdatorium. =-.

  • http://indigospot.com Ian W. Parker

    @AbhiTechBlog: The following code would work for external links:

    .ext:after {
    content: url(images/icons/link.png);
    margin-left: 2px;
    }

    Then just assign class=”ext” to your external links.

  • http://www.perigee-art.com Rob W

    Love this tutorial but I can’t get the IE fix to work in 7. I noticed that you are using this technique on this very page … when I loaded this page in IE it doesn’t show the icons either. I don’t believe the IE fix actually works?

  • Mats

    Hi,

    I have something interesting going on… At least for me! The text which is the link on what I’m playing with has a background color, this background color is also applied behind this image. Is is possible to somehow make sure that the background color is only behind the text?

  • http://www.myinkblog.com Andrew Houle

    @Mats – You should be able to target your text and not the image. What is your code?

  • Mats

    Hi Andrew,

    I’m new with css so it might be something easy? This is what I have in the css file;

    a[href$='.mp3']:before {
    content: url(file.png);
    margin-left: 3px;
    }

    And this is the behavior for the a

    .h3_content{
    font-size: 1.03em;
    font-weight: normal;
    letter-spacing: 0.25px;
    line-height: 1.2;
    }
    .h3_content a{
    font-weight: bold;
    font-size: 1.03em;
    text-decoration: underline;
    background-color: #000000;
    color: #ffffff;

  • http://www.myinkblog.com Andrew Houle

    @Mats – I haven’t tested your code out, but because of the background color associated with the link (a) target I believe that is being applied to the image as well. You could try using a background image instead of the pseudo-selector in this case.

  • http://www.codemyconcept.com/ CodeMyConcept

    Great way of explaining it! People understand better by watching the process.