CSS technique for a horizontal line with words in the middle

h1 { overflow: hidden; text-align: center;}h1:before,h1:after { background-color: red; 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%;}
<h1>Heading</h1><h1>This is a longer heading</h1>