Some <hr> Tests

dabblet.css

/*
 *Some <hr> Tests
 */
body {
text-align:center;
}
#rule1 {
height:1px;
background:red;
border:2px dashed white;
}
#rule2 {
position:relative;
text-align:left;
width:300px;
height:4px;
border:0;
background:black;
margin:15px auto;
}
#rule2:before {
content:"\2039";
color:black;
font-size:3em;
position:absolute;
top:-31px;
left:-7px;
}
#rule2:after {
content:"\203A";
color:black;
font-size:3em;
position:absolute;
top:-31px;
right:-7px;
}

#rule3 {
position:relative;
width:70%;
height:10px;
border:0;
margin:15px auto;
}
#rule3:before {
content:"";
display:block;
position:absolute;
left:0;
width:50%;
border:2px solid black;
border-radius:10px;
height:6px;
}
#rule3:after {
content:"";
display:block;
position:absolute;
right:0;
top:-6px;
width:50%;
border:2px solid black;
border-radius:10px;
height:6px;
}
#rule4 {
position:relative;
border:2px solid black;
border-radius:50%;
height:22px;
width:22px;
}
#rule4:before {
content:"";
display:block;
position:absolute;
top:5px;
left:-14px;
border:2px solid yellow;
border-radius:50%;
height:17px;
width:17px;
box-shadow:-6.5px -3.1px 0 0.5px white,-8px -4px 0 1.5px blue;
}
#rule4:after {
content:"";
display:block;
position:absolute;
top:5px;
right:-14px;
border:2px solid green;
border-radius:50%;
height:17px;
width:17px;
box-shadow:6.5px -3.5px 0 0.5px white,7.5px -3.5px 0 1.5px red;
}

dabblet.html

<p>Kinda cool looking. Pizzarea like.</p>
<hr id="rule1" />
<p>Something a little classier:</p>
<hr id="rule2" />
<p>Very. . . Um, geometric. And resizeable:</p>
<hr id="rule3" />
<p><i>Almost</i> incredibly hackish Olympic rings. Unfortunately the 'almost' is for the rings, not the hackish:</p>
<hr id="rule4" />
<p>So there you go. Have fun!</p>

settings.json

{"view":"split","prefixfree":"1","page":"html"}