title: How to center and change the length of underline?
body: <p>I have text that needs to be underlined only under the middle part of the word. </p>
  
  <p>I have created the <a href="https://jsfiddle.net/74zgg81d/" rel="nofollow noreferrer">fiddle</a> and I want the underline should be centered as shown in this <a href="https://postimg.org/image/ah52xryjj/" rel="nofollow noreferrer">image</a>. </p>
  
  <p>The CSS code which I have included in the fiddle are:</p>
  
  <pre><code>.footer p
  {
    width: 50%;
    border-bottom: 1px solid #f51c40;
  }
  </code></pre>