Auto-matic Link Icons

CSS 2.1 has many new wonderful capabilities, and I’m going to show you one of my latest tricks I’ve picked up – automatic link icons.

First, a look at the end result :-



Now, you may have seen similar things on a few websites already, wikipedia certainly makes use of the technique to highlight external links. The astute of you may notice that the ‘external’ link isn’t actually external – think of it more as ‘absolute’. How do we achieve these results automatically? Well, that’s with the power of the new CSS selectors. 456BereaSt. has a nice article on them, but the stuff we’re concerned with is the attribute selectors.

Attribute selectors are done with [square brackets], and can include simple conditional statements, with some options for wildcards thrown in to boot. The easiest way for me to explain is to show you…

Here’s a simple ‘absolute’ link selector – a[href="http:"] – this will target all the ‘a’ tags, with the attribute ‘href’ which is equal to “http:”. Interesting, but its not very useful, because the attribute would need to be exactly “http:” for it to work. So, we add the ^ operator, which means ‘starts with’. So ( a[href^="http:"] ) means any link with a href attribute that starts with ‘http:’ – thus, every external link.

Another operator we can use is $, which means ‘ends with’. So a[href$='.pdf'] is any links that end with .pdf. Now we know how to automatically treat different links differently. Oh, and it works fine in all the most recent browsers (IE7, Firefox) And won’t have any effect on browsers that don’t understand the selectors, so its safe to use.

Now, styling the links is really a matter of personal preference, (and your design), but I the infamous famfamfam silk icon set will help you out here. Once you’ve got your icons, a little clever implimentation of styles will enable you to indent your link slightly to add you icon in as a background image. Thus;

And you’re away – limited only by your icon supply, and the volume of conditional statements you want to make! Here’s mine – covering external links, mailto links, and common document formats…

Tags: ,

  • http://tracemeek.com/ Trace Meek

    Regarding my previous comment, on second thought, this is not an attribute selector at all. There must be some way to target parent elements that contain certain child elements.

  • http://www.creationpublicity.com Edwin

    Wow this is really neat! I am going to use this.

  • http://www.creationpublicity.com.com Edwin

    This is actually a really neat trick. I’m still not sure what use it is though, I’ll have to have a think!

  • Jason

    Sometimes there are instances when I DON’T want it to automatically show up due to display problems when the text is around images, or in bulleted lists or when the text spans to two lines. Is there a way to create a “class” of some sort and apply it to the specific link so the icon doesn’t show up?

    Here’s what I have for PDF.

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

  • Jason

    Nevermind…figured it out. I created a class and manually applied it to the particular link I didn’t want it to show up.

    Below is the code I used if anybody else needs to do this:

    .imageLink {
    padding-right: 0px !important;
    background: none !important;
    }

    • G

      Needed this – Thanks Jason!!

  • Pingback: S.S.D. Agency – Css with Added Auto Iconss

  • http://ferra.mlteem.ru ferra

    A lot of thanks, it works!

  • http://www.waynet.org Jane

    Works great – thanks! I have a CSS newbie question though. My a:hover style uses white text with a blue background on a white body. With the transparent background, it causes the link to disappear when it’s rolled over. Is there a workaround, aside from changing the hover style?

  • http://www.psyked.co.uk/about James

    @Jane – You’d have to change the hover style – but you could choose to omit the transparent keyword altogether, and it’d just inherit the background that already exists, instead of overriding it:

    a[href^="http:"] {
    display:inline-block;
    padding-right:14px;
    background:url(/Images/ExternalLink.gif) center right no-repeat;
    }

  • http://www.waynet.org Jane

    Perfect! That fixed it. Thank you so much!!

  • http://www.wpexplorer.com WordPress Themes

    Great tutorial. Exactly what I needed. The trick is in the line-height!

  • Matt

    Any tricks to include file size :) I don’t think you can get file attribs with css but maybe with java. any ideas?
    test.pdf [100000 gb]

  • Matt

    oo and AWESOME! :)

  • Ezfera

    THANK YOU!!!!!!!!!!!!!!!!!

  • Matt

    To my question above about file size, for local files you can use filesystemobject with java or vbscript. No solution for external links yet.

  • http://www.conceptArchitects.de/ Constantin Schneider

    Thank you!

  • evil twin

    Awesomely helpful – thanks : )

    Question: is there a way to make a rollover out of this, preferably CSS only? The ‘display: inline-block’ doesn’t seem to work the same way as plain ‘display: block’.

  • Wsmith

    Hey, I use this all the time. But I have a challenge.

    I am using this for ZIP links, but depending on what’s stored in the ZIP (say PDF or Word) I want to customise it dependent on this.

    So I wrote a class that’s applied to the on ZIPs containing Word files so it would display a Word icon. Only that it just adds another icon.

    Any suggestions so I can customise a bit easier?

    I used a minus margin-left to bump it over but you can clearly see there is one icon over-lapping another.

    Cheers!

  • http://www.fene-blog.de Christian

    Thank you. Very usefull tutorial and exactly what I needed.

  • Matt

    Wsmith, you could try a large negative for your margin-left (-8000)
    Personally I would leave both icons and do something like zip (word) to symbolize zips with word documents.

  • http://e Rudolf Mccallister

    Thank you, I’ve recently been looking for details about this subject matter for ages and yours is the best I’ve discovered so far.

  • http://www.madcityads.com Tony Rodriguez

    We recently removed the icons that were hard-coded in over 500 pages and then came to realize that on mobile devices the icons would be useful, so this saves us having to re-insert all the icons. Great tip, thanks.

  • http://www.lemieux-design.net Al Lemieux

    What size should these icons be? I’m guessing the same size as your body text. So if it’s 100%, then it would be 16px. Then what happens on a responsive design when everything re-flows and scales? These would probably scale too.

  • Pingback: Leerverslag week 8 | Elaha's Site

  • Pingback: » Reflectie les 8 Nienke Sennema

  • Pingback: links for 2009-04-01

  • Pingback: Implement and customise a Twenty Eleven child theme | noseyparka.me.uk

  • http://lovingeveryday.blogspot.com/2007/09/childhood-games.html Halley

    0001pt; font-size: 12pt; font-family: Times; h1
    margin: 0in 0in 0. This is just a short explanation on speed exercises for the gig bags uk, there
    should always be a love and demand for the electric gig bags uk.
    But a new project on Kickstarter called gTar is sparking a flurry of fundraising and backers, to the exclusion of learning
    regular chord fingerings.

  • http://lipc.lv lipc.lv

    Hello, just wanted to mention, I enjoyed this
    article. It was practical. Keep on posting!

  • http://forum.the-track.co.uk/profile.php?mode=viewprofile&u=262430 Xanax

    Hello, i think that i saw you visited my web site
    so i came to “return the favor”.I’m trying to find things to improve
    my web site!I suppose its ok to use some of your
    ideas!!

    Also visit my website Xanax

  • http://www.youtube.com/watch?v=J2Niz9L9Oro bajar de peso zanahoria

    I have to thank you for the efforts you have put in penning this blog.
    I’m hoping to view the same high-grade content by you
    later on as well. In truth, your creative writing abilities has
    inspired me to get my very own website now ;)

    Check out my website bajar de peso zanahoria

  • http://www.youtube.com/watch?v=zOsnBLO_kMc como revertir la diabetes pdf

    Hi there, I want to subscribe for this web site to
    take most up-to-date updates, therefore where can i do it
    please help out.

    Have a look at my weblog … como revertir la diabetes pdf

  • http://moorecnmq.bravesites.com Darin

    Hello Dear, are you genuinely visiting this web page daily,
    if so after that you will absolutely take good experience.

    Have a look at my webpage; website (Darin)

  • http://xn--42c6baa3d1awa5bv8m2a0i.com/ คาสิโนออนไลน์

    What i do not realize is if truth be told how you’re now not really a lot more
    neatly-preferred than you might be right now.
    You’re so intelligent. You realize therefore considerably in
    the case of this topic, produced me individually consider it from
    numerous numerous angles. Its like men and women don’t seem to be interested until it is one thing to accomplish with Lady gaga!
    Your own stuffs excellent. Always deal with
    it up!

  • http://www.occultconnection.com/the-secret-knowledge-of-the-neophyte-mathers-p-f-case-darcy-kuntz-pdf/ Occult Connection

    Tao is also a Chinese character which represents a path or way.
    In addition, Lopez has been a fundamental secret of magick
    since occult supplies san francisco ancient times. Far out on
    the dark ships that seek the basalt quays of the great Aurora, when over the
    swamp played the shocking corruscations
    of the daemon light. But quite frankly, the
    question comes down to a desolate shore and out over a vast knighted sea
    escape. But you should not rely on offers of a
    single lender; rather contrast the various loan quotes.

  • http://telearn-archive.net/3908/straightforward-programs-for-smokeless-cigarette-brands-uncovered/ electronic cigarettes health hazards

    I am genuinely delighted to read this weblog posts which
    consists of plenty of useful facts, thanks for providing such
    statistics.

  • http://www.youtube.com/watch?v=uH7wjKkiAIo movers towson md

    What’s Going down i’m new to this, I stumbled upon this
    I have discovered It absolutely helpful and it has helped me out loads.
    I am hoping to give a contribution & aid different users like its aided me.
    Good job.

  • https://www.facebook.com/FSRServices houston brothers roofing in jacksonville fl

    Simply desire to say your article is as astounding. The clearness in your post
    is just great and i can assume you are an expert on this subject.
    Well with your permission let me to grab your RSS feed
    to keep up to date with forthcoming post. Thanks a million and please carry on the enjoyable work.