Who doesn’t know the problem with external links. You don’t want to expect target=”_blank” to your users so you let open links in the same window. To enable users to see that a link is external, you want to mark them. So a user can than decide to open it eventually in a new window/tab themselves.

I have seen multiple solutions for this problem. Some have been executed server-side, some of them used heavy JavaScript function client-side. Most of the time, the scripts searched for all links within a page to change them afterwards.

Through the nice features of CSS3 there is a very elegant solutions. You don’t even have the edit any of your scripts. You just have to use a simple CCS celector that catches all the external links and mark them.

a[href^='http']:not([href^='http://example.com']):not([href^='https://example.com']){ /* styles for external links */ }

The start should be clear. We select all the links with a “href” attribute that starts with “http”. In doing so we don’t get all the anchors, anchor links, relative links as far as the “mailto” links. With the not() function of CSS3 we than select all link that DON’T have the domain as an absolute link with “http” or “https”. You just have to replace “example.com” with your domain. If you also want to select your subdomains you can add them in another not() funtion. Or you can more easily select all links that don’t have you domain name and your top-level domain included:

a[href^='http']:not([href*='example.com']){ /* styles for external links */ }

But in this case we would also ignore links with link text e.g “http://www.ablog.com/nice_post_on_example.com”.

After selecting all the links we can now add yome nice styles. In the following example I used the pseudo-element “:after” to add a text, mark this text red and add a background image. But you are just limited by your own fantasy.

a[href^='http']:not([href^='http://example.com']):not([href^='https://example.com']):after {
	content: ' (external)';
	color: red;
	background: transparent url('external_link.png') center right no-repeat;
	padding-right: 16px;
}

How this looks for the diffrent types of links, you can test on the example page. But you need a browser which partly supports CSS3. I successfully tested it on Firefox 3.5, Safari 4.0, Chrome 2.0 and Opera 10.0. The Internet Explorer didn’t support the not() function, even in Version 8.0.

Example

If you have any suggestion to my solution or if you know another good solution I would like to hear it.