AvengeX Webmaster Development - Free PHP, MySQL, CSS, XHTML, Photoshop Tutorials

Use CSS 3 selectors to automatically add an icon to external links

First of all, let me start off by mentioning the glaring limitation of this technique: it wont work in browsers that dont support modern web standards, for example, Internet Explorer 6. However it works perfectly in modern versions of Opera and Firefox. If these restrictions are problematic for the use you have planned, you will probably want to take the conventional approach and assign different classes to internal and external links.

So why would you want to use this technique then? For one it is an easy way of adding a useful accessibility feature, it is also lower maintenance than manually assigning a class to each link and much easier on CPU than manually adding it. I use it on my site as a 'perk feature' for those with compatible browsers; its absence doesn't take anything away from the average user's experience but having the ability can be a pleasant bonus.

On to the code...

First of all we will style all the links so that an icon is visible to their right indicating that they are external. Feel free to use this one and colorize as necessary.
a[href^="http:"] {
background: url(images/external.gif) right center no-repeat;
padding-right: 12px;
[href^="http:"] is a selector which indicates a link with any href attribute. So, potentially an external one.

Now we will cancel out the rule for all links pointing to our selected domain. (that should be the domain at which the page is hosted)#body a[href^="http://www.example.com"] {
background: transparent;
padding-right: 0px;
}
#body a[href^="http://example.com"] {
background: transparent;
padding-right: 0px;
}
Note: we create a rule for both http://domain and http://www.domain because they are both link methods commonly used and do not detect each other.

I hope you found this technique helpful or at least that you learned something new.

---