title: How to Create Page Header with customized underline
body: <p>I am trying to find creative ways to do page-headers, because the typical ones are boring, in my opinion.</p>
  
  <p>Here is what I found:</p>
  
  <p><a href="https://i.stack.imgur.com/KCG5B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KCG5B.png" alt="enter image description here"></a></p>
  
  <p>Are those two separated <code>&lt;hr /&gt;</code> elements with a <code>&lt;span class="glyphicon glyphicon-star&gt;&lt;/span&gt;</code> in between?</p>
  
  <p>I have tried but can't figure out how to do it so that it is dynamic.  I don't want to have to adjust the css if the <code>&lt;h1&gt;</code> is longer than About (in the pic).</p>
  
  <p>Here is what I have:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;h1 class="text-center"&gt;About&lt;/h1&gt;
    &lt;hr class="new-hr" /&gt;
    &lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt;
    &lt;hr class="new-hr"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.new-hr{
    width: 20%
  }
  </code></pre>
  
  <p>I have also created a <a href="http://codepen.io/Bvillekid12/pen/PppRKv" rel="nofollow noreferrer">codepen</a>.</p>
  
  <p>Can someone help me recreate this?</p>
  
  <p>Any help is appreciated.</p>