Styling hr elements

dabblet.css

/* Styling hr elements */
/* ref: http://html5doctor.com/small-hr-element/ */
body {background: #ddd;}
h1 {font-weight: normal; font-size: 1.5em;}
ol {margin-top: 5em;}
hr {margin: 1.5em 0;}
hr:nth-child(2) {
  border: 0;
  border-top: 1px solid #999;
}
hr:nth-child(3) {
  border: 0;
  border-top: 6px dashed #bbb;
}
hr:nth-child(4) {
  border: 0;
  border-top: 6px solid #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.7);
}
.borders {
  position: relative;
  border: 0;
}
.borders:before {
   content:"";
   position:absolute;
   z-index:-1;
   top:4px;
   left:4px;
   right:4px;
   bottom:4px;
   border:4px solid #fff;
   background:#4aa929;
}
.borders:after {
   content:"";
   position:absolute;
   z-index:-1;
   top:6px;
   left:6px;
   right:6px;
   bottom:6px;
   border:2px solid #999;
   background:#4aa929;
}

dabblet.html

<h1>Styling <code>&lt;hr></code> elements</h1>
<div>
<hr>
<hr>
<hr>
<hr>
<hr class="borders">
</div>
<ol>
<li>default <code>&lt;hr></code>
<li>1px <code>border-top</code>
<li>6px dashed <code>border-top</code>
<li>border with <code>box-shadow</code>
<li><code>&lt;hr></code> with <a href="http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/">gen content borders</a>
</ol>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}