CodePen

HTML

            
              h1.header
  span Some header text

h2.header.header-ex
  span Header text 100%

br

div
  h1.header.header-ex
    span Some header text inside a container

div
  h2.header 
    span Hello, world!

            
          
!
via HTML Inspector

CSS

            
              body {
    margin:0 auto;
    background-color: #efefef;
    color:#444;
    text-align:center;
    font-family: georgia, serif;
}

h1,h2{
  font-weight:normal;
}

div {
    width:600px;
    margin:1em auto;
    border: 1px solid #666;
    text-align: center;
    background-color: #fff;
    resize: both;
  
    h1{
      font-size:.8em;
    }
}


//Starts here

.header {
    display: inline-block;
    position: relative;
    text-align: center;
    padding: 0 .5em;
  
  span {
    position: relative;
  }
  
  &:before,
  &:after{
    content:"";
    position: absolute;
    width:20%;
    height: 1px;
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    top:50%;
  }
  
  &:after{
    left:100%;
  }
  
  &:before{
    right: 100%;
  }
  
  //Need to make this class work with a transparent background
    
  &.header-ex{
    display: block;
    padding: 0;
    background: none;
    
    span{
      background-color: #fff;
      padding: 0 1em;
    }
    
    &:after{
       content: normal;
    }
    
    &:before{
      right:0;
      margin: 0;
      width: 100%;
    }
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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