title: Remove underline only from anchor element child
body: <p>When an <code>a</code> tag contains child elements, like an <code>i</code> tag, it's still applying the underline to it on hover, and I'm wondering how to remove the underline from just the <code>i</code> tag when someone hovers over the <code>a</code> tag.</p>
  
  <p>The CSS I'm working with:</p>
  
  <pre><code>a{
      display:block;
      text-decoration:none;
  }
  a i{
    color:#888;
    margin-left:5px;
  }
  a:hover{
      text-decoration:underline;
  }
  a:hover i{
      text-decoration:none !important;
  }
  </code></pre>
  
  <p>Here is a fiddle to explain:
  <a href="http://jsfiddle.net/kkz66x2q/" rel="noreferrer">http://jsfiddle.net/kkz66x2q/</a></p>
  
  <p>I simply would like the underline to be GONE only on the <code>i</code> element when you hover over the link.</p>