Similar to the flex answers above, this can also be done using CSS Grids. This gives you more scope to offset the title, and a more simple way of expanding the gap between the lines (using grid-template-columns) and the content (using grid-gap).
The benefits of this method over flex methods is the ease of being able to offset the lines, and additionally only needing to add in a gap between columns once (not twice, for each the :before and :after pseudo element). It is also much more syntactically cleaner and obvious IMO.
h1 {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
grid-gap: 1rem;
}
h1:before,
h1:after {
content: "";
display: block;
border-top: 2px solid currentColor;
}
h1.offset {
grid-template-columns: 1fr auto 3fr;
}
h1.biggap {
grid-gap: 4rem;
}<h1>This is a title</h1>
<h1 class="offset">Offset title</h1>
<h1 class="biggap">Gappy title</h1>
<h1>
<span>Multi-line<br />title</span>
</h1>