title: How to center a small border at the bottom of an element using :before and :after?
body: <p>I am trying to create a small border under my headlines on a website. I am doing it using before and after pseudo-elements. The code is a bit particular because I am adapting the code of the template I'm using. It is like this <a href="https://jsfiddle.net/zmxte361/" rel="nofollow noreferrer">see fiddle</a></p>
  
  <p>The problem is the "left: 48%;" property : I have set it manually, but depending on the size of the screen, it might be centered or not, so it is not responsive. Is there a way to have the border always centered under the text ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.headline p:before,
  .headline p:after {
    position: absolute;
    left: 48%;
    display: block;
    width: 70px;
    border-bottom: 3px solid black;
    content: "";
  }
  
  h3 {
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="headline"&gt;
    &lt;h3&gt;
      My title
    &lt;/h3&gt;
    &lt;p&gt;
    &lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>