title: How can I make an underline some pixels longer than the headline?
body: <p>I am currently trying to make a custom underline with border-bottom. However, currently the underline is going all the way of my block-element (whole page).</p>
  
  <p>I’d prefer to have it being only 50px longer than my headline (however the text is flexible and I do not know the length).</p>
  
  <p>Can I do this without adding another <code>&lt;span&gt;</code> tag within the <code>&lt;h2&gt;</code> somehow? I do not wannt to add a <code>&lt;span&gt;</code> element to each <code>&lt;h2&gt;</code> just to change my design.</p>
  
  <p>Current HTML is:</p>
  
  <pre><code>&lt;h1&gt;My title&lt;/h1&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>h1 {
      font-size: 18px;
      color: #b62525;
      border-bottom: 2px solid #c68181;
  }
  </code></pre>
  
  <p>Is it possible to adjust the border-bottom length to my text length? (e.g. behave like inline element for border, but like block for newlines, padding and margin)</p>