title: Thick underline behind text
body: <p>How to reproduce this sort of underline behind the text ABC using spans and css?</p>
  
  <p><img src="https://i.stack.imgur.com/ofcPc.png" alt="thick underline behinde image"></p>
  
  <p>I have been able to do underline <em>below</em> the text with nested <code>span</code> and colored <code>border-bottom</code>, but cannot get it <em>behind</em> the image and <em>above</em> the text base line.<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p style='font-size:100px'&gt;&lt;span style='border-bottom:30px red solid'&gt;&lt;span&gt;A&lt;/span&gt;&lt;/span&gt;&lt;span style='border-bottom:60px red solid'&gt;&lt;span&gt;B&lt;/span&gt;&lt;/span&gt;&lt;span style='border-bottom:90px red solid'&gt;&lt;span&gt;C&lt;/span&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>