title: :hover:before text-decoration none has no effects?
body: <p>As title, I'm adding icons using <code>.icon-*</code>. When adding an icon to an hyperlink:</p>
  
  <pre><code>&lt;a href="#" class="icon-email icon-large"&gt;Email me!&lt;/a&gt;
  </code></pre>
  
  <p>The content inserted by <code>content</code> property shows the underline text-decoration on hover. I'd like to disable the <code>text-decoration</code> only for the content before:</p>
  
  <pre class="lang-css prettyprint-override"><code>[class^="icon-"]:before, [class*=" icon-"]:before {
      font-family: 'IcoMoon';
      font-style: normal;
      speak: none;
  }
  .icon-mail:before {
      content: "\37";
  }
  [class^="icon-large-"]:before, [class*=" icon-large"]:before {
      font-size: 48px;
      line-height: 48px;
  }
  a[class^="icon-"]:before, a[class*=" icon-"]:before {
      margin-right: 5px;
      vertical-align: middle;
  }
  </code></pre>
  
  <p>I've tried this but it's not working (decoration is still visible):</p>
  
  <pre><code>a[class^="icon-"]:hover:before, a[class*=" icon-"]:hover:before {
      text-decoration: none;
      color: white;
  }
  </code></pre>