Horizontal line on each side of heading with no background color or extra markup CSS HTML

Horizontal line on each side of heading with no background color or extra markup CSS HTML

// lines on other side of a heading
// without using extra markup or a background color

// the css 

h1 {
    overflow: hidden;
    text-align: center;
}
h1:before,
h1:after {
    background-color: #000;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}
h1:before {
    right: 0.5em;
    margin-left: -50%;
}
h1:after {
    left: 0.5em;
    margin-right: -50%;
}


// the markup

<h1>Heading</h1>
<h1>This is a longer heading</h1>


// credit: http://puigcerber.com/2013/03/08/centered-heading-overlaying-a-horizontal-line-with-css/