title: Overriding underline on an element inside another element with underline
body: <p>my question is almost exactly the same as: <a href="https://stackoverflow.com/questions/1823341/how-do-i-get-this-css-text-decoration-override-to-work">How do I get this CSS text-decoration override to work?</a>. But I see that the question is 7 years old and I wonder if we have any method of achieving this now?</p>
  
  <p>Basically I have a structure which looks like this: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href='abc'&gt;
    This is underlined &lt;span&gt;But not this.&lt;/span&gt;
   &lt;/a&gt;
    </code></pre>
  </div>
  </div>
  </p>
  
  <p>I want only the text under <code>span</code> to not be underlined. I understand that I can use border bottom and achieve this. Or remove underline from the <code>a</code> tag and insert the text which I want underlined in a <code>span</code>. </p>
  
  <p>I just want to know if there is a way now after 7 years to override <code>text-decoration: underline</code> in a child element. </p>