How can I style external links like Wikipedia?

Question

I would like to distinguish between external and internal links using just CSS.

I would like to add a small icon to the right side of these links, without it covering up other text.

The icon I would like to use is the icon used on Wikipedia.

For example, this is an external link:

<a href="http://stackoverflow.com">StackOverflow</a> 

This is an internal link:

<a href="/index.html">home page</a> 

---

---

How can I do this using just CSS?

Handshaker

Answer 1

demo

Basics

Using :after we can inject content after each matched selector.

The first selector matches any href attribute starting with //. This is for links that keep the same protocol (http or https) as the current page.

a[href^="//"]:after, 

These are the traditionally more common urls, like http://google.com and https://encrypted.google.com

a[href^="http://"]:after, 
a[href^="https://"]:after {

We can then pass a url to the content attribute to display the image after the link. The margin can be customized to fit the

  content: url(http://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png);
  margin: 0 0 0 5px;
}

Allow certain domains as local

Let's say we're on example.org and we want to mark links to blog.example.org as on the same domain for this purpose. This is a fairly safe way to do it, however we could have a url like http://example.org/page//blog.example.org/

note: make sure this comes after the above in your styles

a[href*="//blog.example.org/"]:after {
  content: '';
  margin: 0;
}

For more strict matching, we can take our initial settings and override them.

a[href^="//blog.example.org/"]:after, 
a[href^="http://blog.example.org/"]:after, 
a[href^="https://blog.example.org/"]:after {
  content: '';
  margin: 0;
}

Handshaker

You could use a[href^="//"]:after, a[href*="://"]:after {...} then you would select all protocols (e.g. ftp, ...) – Ofay

I hate to be That Guy, but the icon in question at wikimedia says it's licensed under the GPL. I have no idea how the "viral" nature of the GPL applies to websites because IANAL (and neither are you, commenter from the future), but if you weren't already explicitly releasing everything under a specific license, consider doing so. – Flivver

How do I make exceptions for image external links, as I dont want to have an external link icon besides a logo linking to another site etc? – Haase

Answer 2

I think this will help you resolve the issue simply,

Add an offsite link icon after external links with CSS

Quote from the article:

This will make all links styled with an external linked icon in the end,

a[href^="http://"] {
    background: url(http://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png)     center right no-repeat;
    padding-right: 13px;
}

And following code will prevent the external icon style on specific urls:

a[href^="http://www.stackoverflow.com"]  {
    background: none;
    padding-right: 0;
}

Takeshi

Answer 3

OK, this is pretty similar to the other answers, but it's short and sweet and works for both http and https. Of course, you will have problems if you use double slashes in your internal URLs, but you shouldn't be doing that anyway (see these questions).

a:not([href*="//"]) {
    /* CSS for internal links */
}

a[href*="//"] {
    /*CSS for external links */
}

I wish I'd known about this before I tagged all my links with class="internal" and class="external".

So to add an image, as already stated:

a[href*="//"]::after {
    content: url(/* image URL here */);
}

Incommutable

Duplicate of eagles answer. – Cousingerman