Add line-on-side headers. Fallback for non-javascript browsers is no lines.

line-on-side-headers.js

jQuery(function( $ ){
	// Sets the horizontal location of the lines
	$(document).ready(function () {
		var entryHeaderWidth = $('.entry-title').width();
		var titleWidth = $('.entry-title .title').width();
		$('.entry-title span.before').css("right", entryHeaderWidth/2+titleWidth/2 );
		$('.entry-title span.after').css("left", entryHeaderWidth/2+titleWidth/2 );
	});
});

output.html

<h1 class="entry-title"><span class="before"></span><span class="title">%s</span><span class="after"></span></h1>

<!-- Optionally: add a .wrap class around all of it and add a width, then overflow: hidden -->

styles.scss

.entry-title {
		text-align: center;
		display: inline-block;
		margin: 0 auto 0 auto;
		position: relative;
		width: 100%;
		
		span.before,
		span.after {
			content: "";
			position: absolute;
			border-bottom: 5px solid #000; // This is the line on each side, style as you like
			top: 50%; // center it vertically
			transform: translateY(-50%); // center it vertically
			width: 100%;
		}
		span.before {
			right: 100%;
			margin-right: 15px; // space between line and text
		}
		span.after {
			left: 100%;
			margin-left: 15px; // space between line and text
		}
	}