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…
@ James – Thanks, but it didn’t work unfortunately
@aurrutia – I suspect that in
a[href $=' .php?id=#']the # isn’t matching your actual links, I’d suggest trying a[href*="download.php?"]Thats assuming that all your downloads go through that page and that no other pages contain the string download.php
@Carola – I’d guess that means that all links on your site are absolute rather than relative, so you could try using the standard:
a[href^="http:"]
{
/* apply your external link styles here */
}
then overriding and resetting the styles for links which are internal to your domain by doing something like:
a[href^="http://www.yourdomain.com"]
{
/* reset your internal link styles here */
}
hth
Matt
I have to say it is a little hard for me to understand all.
But thank you so much.
how to call avatar from profile? is it possible?
@ozan – Check out http://en.gravatar.com/ to see how to get your picture alongside your comments.
test: http://shopandsupport.ca/sasgroup/resources/SAS_ORDERFORM_0909.pdf
This is very useful information for me, thanks to everyone that has made useful comments, i have learnt a lot today.
James,
Great post!
Nothing irks me more than clicking a link that turns out to be a PDF file. I’ve already implemented your code for PDF links on a site I’m creating. I’m eager to try out the code on other types of links as well. Thanks, too, for the link to the famfamfam silk icon set.
BTW, I have lint in my belly button as old as you (was that TMI?)
TMI
Good work James. Though its not working on that IE6 but you have given a great tip. Going to bookmark
thnkx
Hi, I found this in a book I borrowed from the library: “CSS the missing manual” though they used:
a[href^='http://']
instead of the ” you use. Theirs didn’t work at all, but trying your code, it works on my site in Firefox, but I can’t see the icons in IE, though your website looks okay in both IE and Firefox. Dunno what’s going on there then, but thanks.
awesome, the reply to using the ‘mail to’ link covered what I had in my head. Thanks James!
Blimey – it works! In ie7 at least. Thanks for the share.
Amazing, I never new this, thanks.
Nice tutorial and a good trick. Though it was difficult to understand but got it in the end. Thanks
Can anyone tell me if there are problem with IE8 using this CSS as I cannot get it to work under IE8
No known issues with IE8, can you post a link?
Hi James
here is my html
test
Test
</body
This is the archive css
a[href$='.pdf']{
display:inline-block;
line-height:18px;
min-height:18px;
overflow:visible;
background:transparent url(../images/icons/pdf.ico) center left no-repeat;
padding:2px 0 2px 20px;
}
a[href$='.xls'], a[href$='.csv'], a[href$='.xlt'], a[href$='.xlw'] {
display:inline-block;
line-height:18px;
min-height:18px;
overflow:visible;
background:transparent url(../images/icons/excel.ico) center left no-repeat;/*——————————-*/
padding:2px 0 2px 20px;
}
a[href$='.doc'], a[href$='.rtf'], a[href$='.docx'] {
display:inline-block;
line-height:18px;
min-height:18px;
overflow:visible;
background:transparent url(../images/icons/word.ico) center left no-repeat;
padding:2px 0 2px 20px;
}
any Ideas
sorry
<!–
test
Test
</body
–>
I have placed a link
Thanks
jason
I think the problem there is the file format – I would be surprised that IE8 supported the “.ico” format for background images. Try switching it for a PNG file and see how that works.
Great stuff, I’ll be sure to use this!
http://www.text.com
Great tips thanks
Testing…. hmmm.
something.gif
something@something.com
something.pdf
something.swf
something.xls
something.ppt
something.zip
Click here for my file
My zip file
Great work! Can one use regular expressions to select for a “not” case? For example, a common pattern is to have a linked image, which I wouldn’t want to have an icon after it. How would this pattern (a img) be matched in the regular expression? Thanks!
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.
Wow this is really neat! I am going to use this.
This is actually a really neat trick. I’m still not sure what use it is though, I’ll have to have a think!
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;
}
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;
}
A lot of thanks, it works!
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?
@Jane – You’d have to change the hover style – but you could choose to omit the
transparentkeyword 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;
}
Perfect! That fixed it. Thank you so much!!
Great tutorial. Exactly what I needed. The trick is in the line-height!
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]
oo and AWESOME!
THANK YOU!!!!!!!!!!!!!!!!!
To my question above about file size, for local files you can use filesystemobject with java or vbscript. No solution for external links yet.
Thank you!
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’.
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!
Thank you. Very usefull tutorial and exactly what I needed.
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.
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.
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.