title: Display an icon from icon font as pseudo element in anchor with underline
body: <p>I want to display an "external" icon on any anchor elements that have the attribute rel="external". I was using an image originally, but this doesn't scale well with font-size and I want to minimise the amount of images we're using.</p>
  
  <p>We use font-awesome for our other icons across the site, and usually include these with a specific icon element with the .fa-* class. However for external links I'd like to simply target them using CSS and apply the icon using the :after pseudo selector.</p>
  
  <p>This is the CSS I have so far, and this is rendering correctly in iOS and Firefox, but in Chrome it is a pixel or two out, and the underline from the anchor is noticeably misaligned. I've used the <a href="http://astronautweb.co/snippet/font-awesome/" rel="nofollow">CSS content</a> value with two spaces before it to include the icon.</p>
  
  <pre><code>a[rel="external"]:after {
    content: "\00a0\00a0\f08e";
    font-family: FontAwesome;
    font-size: 0.7em;
    line-height: 1;
  }
  </code></pre>
  
  <p>Here is a jsfiddle showing the behaviour: <a href="http://jsfiddle.net/hcharge/b9L3o5c5/2/" rel="nofollow">http://jsfiddle.net/hcharge/b9L3o5c5/2/</a></p>
  
  <p>Does anybody know of a way to get this to display consistently across browsers? Or am I forced to revert back to using images?</p>
  
  <p>Edit: I should've added that using a bottom border isn't an option as it doesn't allow for sufficicent control over how far away the border is from the bottom of the text.</p>