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…
Very nice tip James! I’ve bookmarked this one. It’s one of those nice little tricks that will display as intended in all modern browsers, and gracefully degrade in IE 6.
Glad it helps!
In the event that you’ve requirements that can’t be met like this – or you need more compatability with older browsers, you can always take the base CSS that generates the iconified effect, and apply it manually as ‘normal’ styles.
Great article—I’ll use it on my blog!
谢谢。
test: http://www.google.hu/test.zip
Hey hey, it works! An interesting effect though with the combination of external linked files… I wonder wether I can find a fix for that…
Hmm, I bet the external link+file type issue could be fixed with the :before and :after selectors?
Nope… I was wrong. I guess that external link icons need a little more thought…
Im a bit new to css but would a roll over effect still work on image backgrounds using your automated stylesheet if used
a:hover [href$='.doc']
?????
That’s really dependant on your setup – Elements can only have one image background. So, if your links elements already have a background image either of the CSS styles could be overwritten.
If however, the parent element of your link has the background image, they should both display their respective backgrounds.
Does that help?
hello
i have an idea …
add Internet explorer icon to the normal links
Indeed – adding an Internet Explorer Icon for .htm pages is possible, and I’ve seen it on other websites, like those created in Sharepoint Server (Microsofts’) – but I decided to steer clear of it, so-as not to offend users of other browsers.
It does however, give me another idea…
Combine this CSS with another script – such as the css browser selector, and you can tailor the .htm icons to your visitors browser… i like it.
Good read
In Dreamweaver CS3 the CSS code;
a[href$='.pdf'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(Images/PDFIcon.gif) center left no-repeat;
}
generates the error “Error parsing styles Affects: Internet Explorer 6.0″
Any advice?
@hbadorties -
I can’t be sure without having Dreamweaver CS3 to hand, but it’s probably throwing the warning because of the a[href$='.pdf'] selector.
IE6 doesn’t support these attribute selectors fully, meaning the styles wouldn’t be recognised by that browser, the upshot being that IE6 won’t display the custom styles for your links.
On the plus side, it wouldn’t break anything.
The only way around this is to manually apply the link styles with classes. So it’s not a critical warning, IE6 is just (unfortunately) incompatable with this method!
If you’re looking for a way to do this that will work in IE6, you can do it with Javascript — users who don’t have Javascript enabled won’t see it, but that’s likely a smaller population than users who are using IE6. I’ve written about a way to do it with jQuery here:
http://blog.rebeccamurphey.com/2008/01/06/unobtrusive-cross-browser-add-filetype-icon-link-javascript-jquery/
It works on WP as well.
Great tips thanks
Nice trick. I didn’t realize I could do that. I wish more websites did this. Although the icons used in this example do look a little big.
The icons in the example are standard favicon size, although I take your point.
Hi. Good post, James – although a bit advanced for me to follow entirely at the stage I’m at with Dreamweaver CS3. Will revisit when I know more.
Just one query that I’m sure is simple, but that I can’t figure out. How do you add a title to an email link?
It’s simple to add an email link and to have the onsite text link read any way you want, but how do I have the subject line of the email already typed in, so the site visitor clicking on the email link doesn’t have to type a title in themselves before sending their email?
Would be appreciative of any help re this if it is not too time-consuming!
Cheers
Ross
Ross – you’ll want to check out this page, “Using the mailto link”.
Brilliant! Thanks a lot, James!
Cheers
Ross
Indeed useful! Thanks.
IE 6 not support this code
@Rajnikant – No, unfortunately not. You can achieve the same effect however, with javascript. Check our Rebecca Murphey’s article: http://blog.rebeccamurphey.com/2008/01/06/unobtrusive-cross-browser-add-filetype-icon-link-javascript-jquery.
Nice article. It was very helpful for me.
I’m having trouble with the icons showing in IE. This works great in FF, however. I’m wondering if IE needs a specific doc type statement or if there’s another reason why these won’t show? I’m using your code almost verbatim.
a[href$='.pdf'] {
display:inline-block;
padding-left: 32px;
padding-top: 5px;
background: transparent url(/images/pdf_icon.gif) no-repeat center left;
}
On this page: http://www.calcounties.com/buyer-seller.php
The icons show in FF but not IE. Ideas on this?
@Brian – Internet Explorer 6 and below don’t support these CSS selectors. I’ve looked at your page in IE7 and it works, but IE6 doesn’t.
The only solution I can think of for IE6 would be using javascript (http://blog.rebeccamurphey.com/2008/01/06/unobtrusive-cross-browser-add-filetype-icon-link-javascript-jquery) which gets you the same effect by modifying the link classes.
It is a great way to add icons to links, but I have a problem :
a[href^="http:"] {
display:inline-block;
padding-right:14px;
background:transparent url(/Images/ExternalLink.gif) center right no-repeat;
}
using this, I have an icon before all links but I don’t want to have it when I link an image , I just want it to work with TEXT. Is it possible without using classes ?
You can combine several CSS selectors to get it only targeting text links – try using p a[href^="http:"] {} to only select links inside a paragraph or overwrite the styles on images with img a[href^="http:"] { or a[href^="http:"] img { to reset the background image, padding and line-height elements.
CSS 2.1 is compatible with every type of browser like IE and Firfox….
Cascading Style Sheets (CSS) web design lessons
Css link Properties Attributes – examles
Css Link
Exanmples 1
Css Link Exanmples
2
Awesome !
I do like this idea, but has anyone noticed that if you have the link in the middle of a paragraph then zoom in just once in IE7 everything goes haywire – i’ve played around trying to fix it but have been unable to.
@Matt : I never noticed that before in Internet Explorer – but I’ve tested it and I see what you mean. I wonder wether the zoom property of CSS could fix that…
I tried to click the underlined “actually”.
@Colin – the underlined “actually” isn’t really a link, just underlined text.
I never noticed that before in IE – but I’ve tested it and I see what you mean. I wonder wether the zoom property of CSS could fix that…
Lee
These are only for CSS3 compliant browsers right?
Actually, these selectors are part of the CSS2 spec, so they don’t need CSS3 compliant browsers. Most major browsers from IE6 and up support the selectors on links.
nice Auto-matic Link Icons great tutorial thanks
Hi!, nice trick!
It is possible to use something like this for all my downloads (www.mydomain.com/download.php?id=10, http://www.mydomain.com/download.php?id=11, http://www.mydomain.com/download.php?id=12 …)?
I tried this but doesn’t work:
a[href $=' .php?id=#'] {
display:inline-block;
padding-right:14px;
background:transparent url(/Images/zip-icon.gif) center right no-repeat;
}
any idea?
Thanks a lot, James
Thanks a lot. love it.
Thanks. You saved me a lot of grief!
Great tips thanks
http://www.pdf.com/PDF.pdf
Hi, thanks for this tutorial, very very useful, but I’m having a bit of a problem…
Is there any code I could use to block the external link image appearing for all my links? Now it’s displaying in every link I have in my blog, which is upsetting my layout a bit (like links for comments and categories are all displaying my external link image :-s).
Thanks
Carola – the best way to limit the effects is using more specific CSS – so instead of:
a[href^="http:"] {}
you could do
.content a[href^="http:"] {}
which would only affect the links inside the content container, and leave everything outside it alone.