I've just been playing around with the formatting of this website. I saw a site back in late November that had small images designating off-site links. I started to play with it at the time, but didn't get very far. I started again today, and did some digging in how to implement it.

If you have a look, you will see that I've got offsite links in italics, underlined with a dotted line, and with a small icon with an arrow. Just in case you want to do something similar, this is the coding I used (no need to look if you're not into CSS coding or explations thereof!)...

a[href] {
padding-right: 15px;
background: transparent url("http://forum.thespirit-online.com/index.php?action=dlattach;topic=969.0;id=115") center right no-repeat;
font-style:italic;
border-bottom: dotted 1px #cc0000;
white-space: nowrap;
}

a[href*="spirit-blog"] {
padding-right: 0px;
background: transparent url(none);
border-bottom: none;
font-style: normal;
}

a[href*="javascript"] {
padding-right: 0px;
background: transparent url(none);
border-bottom: none;
font-style: normal;
}

a[href*="mailto"] {
padding-right: 0px;
background: transparent url(none);
border-bottom: none;
font-style: normal;
}

a[href*="post-edit"] {
padding-right: 0px;
background: transparent url(none);
border-bottom: none;
font-style: normal;
}

The way I understand it is like this.

The CSS designates parameters for the 'a href' (link) code. First, it sets a padding of 15 pixels to the right. Then it sets the background for the link code, which is centred on the link and to the right (just as well, 'cause the padding's to the right too). If 'no-repeat' wasn't included, then the background would tile for the length of the link.

Next we've made the style to be italic, and we've put a border under it. By putting in the 'white-space: nowrap', we're preventing any wrapping to occur between the link and the icon, so that if it's at the end of a paragraph, the icon doesn't move on down to the next line.

Now, here's the fun bit.

All of that parameter setting applies to ALL links. But we don't want it to apply to all links, do we. Hell no. So we have to exclude a few HREF references, so that the coding doesn't apply.

By using 'href*="partofwebsiteyoudon'twantformatted", and then applying the OPPOSITE parameters of what you've already done, you're basically telling the web browser that any links including what you specify are to have the FOLLOWING parameters. Eg. no background, no border, and normal font style.

Because it's only external links you want formatted, you need to define parts of your internal links which aren't to be formatted like that. I've done part of the domain name that's specific to my site, as well as mailto, as that's just an email. (You can define different icons for different purposes using this feature as well.) I've also done javascript, as that's usually just internal, as well as post-edit, which is the links that allows me to edit my blog. Only I see them, but I don't want them formatted as if they're external.

I hope that explains it well enough. I had to go through a very annoying process of research and discovery, because most of the people talking about this seem to think you're already a CSS guru and understand everything they do. I wanted to provide this explanation so that 'newbies' like me know what it is they're doing.