title: Cannot undo text-decoration for child-elements
body: <p>Say you have this html:</p>
  
  <pre><code>&lt;a href="#"&gt;
      This is underlined
      &lt;span&gt;
          This isn't.
      &lt;/span&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>And this css:</p>
  
  <pre><code>a:hover {
      text-decoration: underline; /* I know, this is enabled by default. */
  }
  
  a:hover span {
      text-decoration: none !important;
  }
  </code></pre>
  
  <p>Why does the a > span element still has an underline. I'm pretty sure you should actually have undone the decoration by using 'none'. I know that you can achieve the result I want by using this:</p>
  
  <pre><code>&lt;a href="#"&gt;
      &lt;span class="underlined"&gt;
          This is underlined
      &lt;/span&gt;
      &lt;span&gt;
          This isn't.
      &lt;/span&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>plus this css:</p>
  
  <pre><code>a:hover {
      text-decoration: none;
  }
  
  a:hover span.underlined {
      text-decoration: underline;
  }
  </code></pre>
  
  <p>But... it just doesn't make sense to me why you can't unset the text-decoration of a child-element.
  So, why...?</p>
  
  <p><strong>Edit: Inline-blocks</strong></p>
  
  <p>According to @amosrivera, it does work when you use inline-block. I can confirm this to work in Safari and Chrome!</p>
  
  <pre><code>a:hover span{
      text-decoration:none;
      display:inline-block;
  }
  </code></pre>
  
  <p>As mentioned, this works for Safari and Chrome, but not for Firefox. The following solution works for Firefox, but not for Safari and Chrome...</p>
  
  <pre><code>a:hover span{
      text-decoration:none;
      display:block;
  }
  </code></pre>
  
  <p>Little table:</p>
  
  <pre><code>    CSS-Rule            |    Webkit    |    Firefox    |    Opera    |    IE    
  --------------------------------------------------------------------------------
  display: block;         |       x      |               |      ?      |     ?    
  display: inline-block;  |              |       x       |      ?      |     ?
  </code></pre>