title: CSS - bottom border using :after pseudo-element that's the length of text
body: <p>I have a <code>&lt;h3&gt;</code> that I need to style to contain a red bottom border behind it, using <code>::after</code> pseudo element.</p>
  
  <p><strong>Goal:</strong>
  The red bottom border should only display the length of the text.</p>
  
  <p><strong>Result:</strong>
  The closest I have it right now, the border spans the parent width.</p>
  
  <p><a href="https://i.stack.imgur.com/7Djet.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7Djet.jpg" alt="Border using CSS after pseudo"></a></p>
  
  <pre><code>&lt;h3&gt;&lt;span class="headingLine"&gt;Lorem Ipsum Dolor Sit Amet&lt;/span&gt;&lt;/h3&gt;
  
  span.headingLine:after{
    position: absolute;
    content: '';
    border-bottom: 7px solid red;
    z-index: -1;
    left: 0;
    width: 100%; /* If I remove the width 100%, the red doesn't show */
    bottom: 15px;
    display: inline-block;
  }
  </code></pre>
  
  <p><strong>How do I adjust the markup / CSS so that the red border only spans the width of the text?</strong></p>
  
  <p><em>There may be instances of multiple lines of text (small browser window / lengthier heading)</em></p>