I found myself wondering a while back how Wikipedia identifies external links the way they do. I’ve seen the same concept on many other sites, but I had never really looked into how it was done. I always just assumed that an image was dynamically added to any code that included external links.
It turns out that I was wrong, and I was kind of happy to find that out. The answer I found makes much more sense, and is much more simple to implement.
It’s all done with CSS
Wikipedia (and, presumably, the other sites that implement similar identifiers) uses CSS to make the little arrow appear that indicates the link leads off of their site. What they have done is simply create a small icon (in my case, I made mine 10×10 pixels, which is just about the height of my 12 pixel Arial text). Then, they added something similar to the following to their CSS file:
a.external {
background: url('external_icon.gif') bottom right;
padding-right: 12px;
}
That’s all there is to it. That will add your “external_icon” to the right of every link that’s assigned the “external” class, and will add the necessary padding to make room for that icon.
The Next Level
With this in mind, I decided to take things to the next level on my own Web site. I implemented classes for e-mail links, adding a small e-mail icon to the right of any mailto links on my site.
I also used the same concept to notify my visitors whenever a link leads to a PDF, Word document, PowerPoint presentation or Excel spreadsheet.
What other uses can you think of for this implementation? I’m curious if you are implementing a similar method on your own site. The tide across the Internet seems to be turning away from using the target attribute in links and moving toward simply indicating which links lead away from the site being currently viewed.
4 Responses
You can actually use this CSS:
a[href ^=”https://”]
{
background: url(‘external_icon.gif’) bottom right;
padding-right: 12px;
}
This will automagically add the icon by identifying the “http://” assigned to any anchor.
You can, but there are still a lot of people using browsers that don’t recognize CSS 2.0 (namely IE 6, which still commands about 40-45% of the market share), so that isn’t quite realistic, yet.
That will be an ideal situation once IE6 disappears, though.
The original CSS you provide doesn’t work in IE6 either. The method above I found has worked great for sites that use dynamic links. Haven’t found an easy IE6 fix yet
The code I provided initially does work in IE6, but it has problems when the link breaks to a new line (same problem in IE7).
The best solution I found is to set the display property to “inline-block” in IE6 and 7.