CodePen

HTML

            
              <h1 class="side-lines">Line-On-Sides Headers</h1>
<h2 class="side-lines">Line-On-Sides Headers</h2>
<h3 class="side-lines">Line-On-Sides Headers</h3>
<div class="wrapper">
  <p class="side-lines">Line-On-Sides Headers</p>
  <p>Here's a problem...</p>
</div>
<p>A personal excercise for the <a href="http://css-tricks.com/line-on-sides-headers/">Line-On-Sides Headers</a> article on css-tricks.com</p>
<p>Created by <a href="http://ricardozea.me/">Ricardo Zea</a></p>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              /*Important stuff*/
.side-lines { background:#eee;
  &:before,
  &:after { position:absolute; width:10%; height:3px; content:''; border-top:1px solid #000; border-bottom:1px solid #000; margin-top:.50em; }
    &:before { margin-left:-11%; }
    &:after { margin-left:1%; }
}

.wrapper { width:300px; margin:auto; background:#999; padding:1px; }

/*Styling stuff*/
body { text-align:center; padding-top:50px; }
$link: #369;
a { color:$link; }
a:hover { color:lighten($link, 20%); text-decoration:none; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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