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…
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;
}
Pingback: S.S.D. Agency – Css with Added Auto Iconss
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.
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
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.