Marking external links with CSS

I've found people find those icons confusing as there is no international icon as such, and some people use them for downloads. I try to avoid them as more often than not they are crappy PDF's

The title would help but a lot of people are to lazy to go mousing all over the page.

Maybe "new window - site/page name" or the longer version "opens in new window ..."

But it's not opening in a new window, it's going to another site. Most of these are other sites within the larger organization. Some of them are on the navigation menu so I have to use something small. I want to do something because I think it's very disconcerting when a link - especially from a navigation menu - unexpectedly points to a new sites.

The icon is a new site icon? always thought is was a new window icon (usually with pdf's attached).
As I said before there is no international use of them - confusing yes

Does anyone else have an opinion on this? I am confident that I need a way to mark external links. With this site there are actually some on the navigation menu that are sure to be confusing to people.

I'm in the same place you are, Megan. I think it would be great to indicate which links are to external sites, but I haven't ever really seen any one universal way that's very obvious. The icon you pointed out on Wikipedia is one I've considered using, but I always hesitated to use it, not knowing how obvious its meaning was to others. After hearing Busy's thoughts, I'm even more hesitant to use it.

Personally I quite like it. External link graphics are starting to be used more often so people will soon understand what they mean. I'm sure people will soon work it out.

However, what I would do is rather than put a class on the link, add [="Courier New"]rel = "external"[/] and then style the link as then you have a link with meaning.

Most browsers (typically, except for IE) support attribute specifc css i.e.

So I guess, really the ultimate solution would be to put the rel and the class on the link and style like it was just the class. Well... at least until microsoft get their browser up to scratch anyway

Ooh, that's a good method, Andy! I've been using attribute selectors quite a lot lately with my user stylesheeets (makes it possible to change a site that uses old school markup)

Here are a couple of other references in case anyone is interested:

• Simple, accessible external links - adds support for non-CSS browsers
• Using CSS3 attribute selectors - I've seen several differente examples of this code. I'm not sure why it doesn't work in Opera, because I've used smart selectors like that for other things and they seem to be fine.
• Long article with thorough explaination of rationale and the above technique (check out the "irrationally obsessed with validating" link further down!!)

Unfortunately, there is no clear convention for the image to be used. Some are using the image I've got , others have a similar one with a page instead of a box and others are using a globe. Hopefully the convention will sort itself out as this technique becomes more popular. This CSS-discuss thread mentions that the box or page icon with arrow seems to be the best convention.

Update: I have posted a blog entry about what I decided to do and how I implemented it.

http://www.meganjack.com/2006/10/26/marking-external-links-with-css/

Nice little link to my site there

This is probably going to sound stupid but why not put a 'key' somewhere (preferably at the top) like a traditional map, that explains in a short blurb what that icon is so that people who do not know what it is for would be able to recognize it at a quick glance.

You can make it small and unobtrusive so that it does not take away from the 'important' stuff

I briefly thought about doing that but it somehow slipped off the "to do" list. Thanks for reminding me