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

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