How can I visually indicate which links are external to my site?

Question

Is it possible with css to visually indicate which links points to another site?

Answer 1

If CSS3 is an option (this excludes IE6) you could style external links differently, provided your lines are relative and not absolute, what I mean is your links look like this:

<a href="/dir/page.htm">My Page</a>
//and external...
<a href="http://www.google.com"&gt;External&lt;/a&gt;

Then you could use the CSS3 attribute selectors to style external links differently, like this:

a { color: blue; } /* Internal links */
a[href^=http] { color: red; } /* External Links */

You can see an example of this working here This uses the attribute "starts-with" selector, anything that has an href="http...." will get styled with this rule. The only alternatives I see are either giving your external (or internal, either one) links a class when they're rendered, or doing the same via javascript.

Answer 2

If you are fine with IE6 users being left out, you can use point 4 from here. Otherwise, I'd go with manually adding a class to external links or using jQuery (or whatever, getElementsByTagName) and testing if the href contains "http://". If so, I would add a class to those elements. Of course, this would only be acceptable if you are willing to use javascript.