<h1 class="line">Heading Goes here</h1>
<h1 class="line2">Heading Goes here</h1>
<h1 class="line3">Heading Goes here</h1>
<h1 class="line4">Heading Goes here</h1>

html,body{margin:0;padding:0}
body{
background-color: #eee;
background-image: linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%, white), 
linear-gradient(-45deg, white 25%, transparent 25%, transparent 75%, white 75%, white);
background-size:60px 60px;
}
/* above not needed for demo */
.line {
	margin:0 0 1em;
	line-height:2em;
	padding:0;
	color:#F00;
	text-shadow:1px 1px 1px #000;
	font-size:1.5em;
	position:relative;
	overflow:hidden;
	text-align:center;
}
.line:before,.line:after {
	content:" ";
	position:absolute;
	top:50%;
	margin-left:-999em;
	height:2px;
	width:998em;
	border-top:1px solid blue;
	background:rgba(0,0,0,0.2);
}
.line:after {
	left:auto;
	width:999em;
	margin:0 0 0 1em;
}

/* second example using flex*/
.line2 {
	margin:0 0 1em;
	color:#F00;
	text-shadow:1px 1px 1px #000;
	font-size:1.5em;
	text-align:center;
  display:flex;
  align-items:center;
}
.line2:before,.line2:after {
	content:" ";
  flex:1 0 0%;
	height:2px;
	background:rgba(0,0,0,0.8);
  margin:0 1.5rem 0 0;
}
.line2:after {
  margin:0 0 0 1.5rem;
}

/* Third example using flex*/
.line3 {
	margin:0 0 1em;
	color:#F00;
	text-shadow:1px 1px 1px #000;
	font-size:1.5em;
	text-align:center;
  display:flex;
  align-items:center;
}
.line3:before,.line3:after {
	content:" ";
  flex:1 0 0%;
	height:1px;
  outline:1px solid #000;
  outline-offset:4px;
	background:rgba(0,0,0,0.8);
  margin:0 1.5rem;
}


/* Fourth example using flex*/
.line4 {
	margin:0 0 1em;
	color:#F00;
	text-shadow:1px 1px 1px #000;
	font-size:1.5em;
	text-align:center;
  display:flex;
  align-items:center;
}
.line4:before,.line4:after {
	content:" ";
  flex:1 0 0%;
	height:1px;
  box-shadow:0 5px 0px #000,0 -5px 0px #000;
  background:#000;
  margin:0 1.5rem;
}