Just learn something cool this morning, how to set up a different style for external link on your site using CSS. I already use it on this site. Just take a look around. All links to external site now have an arrow character after the links, cool isn’t it? :d

Here’s how my CSS set up:

[css]a[href^="http"] {
color: #E58712;
}

a[href^="http"]:visited {
color: #E58712;
}

a[href^="http"]:hover,
a[href^="http"]:active {
color: #9BBB38;
}

a[href^="http"]:after {
color: #E58712;
content: “\21D7″;
}

a[href^="http://funponsel.com"]:after,
a[href^="http://www.funponsel.com"]:after {
content: “”;
}[/css]

The first 3 styles defined the normal behaviour of our link style (both internal and external):

[css]a[href^="http"] {
color: #E58712;
}

a[href^="http"]:visited {
color: #E58712;
}

a[href^="http"]:hover,
a[href^="http"]:active {
color: #9BBB38;
}

I then add the arrow using CSS3 unicode support. Look below:

[css]a[href^="http"]:after {
color: #E58712;
content: “\21D7″;
}[/css]

Above style will look at any tag which started with “http“. The CSS selector “after” adds the unicode content with the specified color. Now, by defining this site’s domain using href^=http://funponsel.com and href^=http://funponsel.com.com on the last 2 styles, both will override the default link style.

[css]a[href^="http://funponsel.com"]:after,
a[href^="http://www.funponsel.com"]:after {
content: “”;
}[/css]

In here, since I don’t want to show the arrow on internal link, I just set an empty content attribute.

Of course, you can also set up more different styles for different link. For example, to catch any link to Wikipedia:

[css]a[href^="http://en.wikipedia.org/wiki/"]:after,
a[href^="http://www.wikipedia.org/wiki/"]:after {

}[/css]

or for email link:

[css]a[href^="mailto:"]:after {

}[/css]

Have fun!

Since I changed my CSS a bit, you can see the picture below for the result of the style I wrote above.

Category links on the first line are an internal links, so they don’t have an arrow beside them. While the other links below are external, they have an arrow beside them.