CodePen

HTML

            
              <h1 class="fancy"><span>A fancy subtitle</span></h1>
<br><br>
<h2 class="fancy"><span>A fancy subtitle</span></h2>
<br><br>
<h3 class="fancy"><span>A fancy subtitle</span></h3>
<br><br>  
<h4 class="fancy"><span>A fancy subtitle</span></h4>
<br><br>  
<h5 class="fancy"><span>A fancy subtitle</span></h5>
<br><br>
<h6 class="fancy"><span>A fancy subtitle</span></h6>
 
            
          
!

CSS

            
              .fancy{
  overflow: hidden;
  text-align: center;
}

.fancy span{
  position: relative;
}

.fancy span:before,
.fancy span:after{
  content: ""; 
  position: absolute;
  top: 50%; margin-top: -.2em;
  height: .4em;
  border-top: 1px solid crimson;
  border-bottom: 1px solid crimson;
  width: 200em;
}

.fancy span:before {  
  right: 100%;
  margin-right: .5em;
}

.fancy span:after {  
  left: 100%;
  margin-left: .5em;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................