title: CSS add small border bottom to text using selector ::after
body: <p>I need to add a small border bottom to my text using the selector <code>::after</code>.</p>
  
  <pre><code>&lt;h3&gt;
    Hello, this border is too long
  &lt;/h3&gt;
  
  &lt;h4&gt;
    Hello, this border should be small
  &lt;/h4&gt;
  </code></pre>
  
  <p>The <code>&lt;h3&gt;</code> element has a normal border, which fills the entire space of the text.
  But I need the <code>&lt;h4&gt;</code> element to only have a border with 10px length.</p>
  
  <p>Basically this is what I'm trying to achieve:</p>
  
  <p><a href="https://i.stack.imgur.com/G7ng2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G7ng2.png" alt="enter image description here"></a></p>
  
  <p>So I tried to play a little with CSS without success:</p>
  
  <pre><code>h3
  {
    border-bottom: 3px solid #000;
  }
  
  h4::after
  {
    content: '';
    border-bottom: 3px solid #000;
    width: 10px;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/qkw37scn/2/" rel="nofollow noreferrer">https://jsfiddle.net/qkw37scn/2/</a></p>