title: Combine :after with :hover for text-decoration of a font icon
body: <p>How can one get the underline to only apply to the a element and not to the content of the :after?</p>
  
  <p>With the CSS below one can control the color of an :after element on :hover. However, the text-decoration cannot be changed.</p>
  
  <p>Here's the jsfiddle to illustrate the problem: </p>
  
  <p><a href="http://jsfiddle.net/JfGVE/500/" rel="nofollow">http://jsfiddle.net/JfGVE/500/</a></p>
  
  <p>Here's the CSS:</p>
  
  <pre><code>a {
      color: green;
      text-decoration: none;
  }
  a:hover {
      color: green;
      text-decoration: underline;
  }
  a:after {
      font-family: FontAwesome;
      content: "\f061";
  }
  
  a:hover:after {
      color: orange;
      text-decoration: none !important;
  }
  </code></pre>