title: How can I style external links like Wikipedia?
body: <p>I would like to distinguish between external and internal links using just CSS.  </p>
  
  <p>I would like to add a small icon to the right side of these links, without it covering up other text.</p>
  
  <p>The icon I would like to use is the <a href="http://commons.wikimedia.org/wiki/File:Icon_External_Link.png" rel="noreferrer">icon used on Wikipedia</a>.</p>
  
  <p>For example, this is an external link:</p>
  
  <pre><code>&lt;a href="http://stackoverflow.com"&gt;StackOverflow&lt;/a&gt; 
  </code></pre>
  
  <p>This is an internal link:</p>
  
  <pre><code>&lt;a href="/index.html"&gt;home page&lt;/a&gt; 
  </code></pre>
  
  <hr>
  
  <p><img src="https://i.stack.imgur.com/0tk39.jpg" alt="sample of desired result"></p>
  
  <hr>
  
  <p>How can I do this using just CSS?</p>