Match hr width to text above

Adding a line under text is generally done with basic text underline formatting.  However, it doesn’t allow you to add any margin or padding between the text and line.

This can be accomplished with an <hr> element.  That works well, unless you need your <hr> element to match the width of your text above.  This becomes even more difficult on mobile and tablet views in addition to em or % based font sizes.

Below is an example of how to use the <hr> styles as a pseudo element to follow the width of the text above it using.

CSS

.hr {
  display: inline-block;
}
.hr:after {
  content: '';
  display: block;
  border-top: 6px solid blue;
  margin-top: 0.5em;
}

HTML

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row text-center">
    <h1>Header Example</h1>
  </div>
  <div class="row text-center">
    <h1 class="hr">Header Example 2</h1>
  </div>
</div>