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?

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;
}