title: CSS "underline" text part
body: <p>How can I "underline" text to get the same effect like you can see under "TEST"?</p>
  
  <p><a href="https://i.stack.imgur.com/vLuw9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vLuw9.png" alt="The blue &quot;rectangle under TEST&quot;"></a></p>
  
  <p>I tried to encapsulate TEST in a <code>span</code> and adding an absolute :after with <code>position: absolute</code>, but I think it's not the correct way and haven't been able to obtain the expected result.</p>
  
  <p>Here's the HTML
  <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;h1 class="white hero-text"&gt;
      &lt;span class="thin"&gt;ALL THIS TEXT IS&lt;/span&gt;
      &lt;br&gt;
      &lt;span class="bold striked"&gt;A TEST&lt;/span&gt;
  &lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>