HR styles

dabblet.css

/* HR styles */
hr.zero {}
hr.one {border: 0; border-top: 1px solid #999; border-bottom: 1px solid #333; height:0;}
hr.two {border: 1px dashed grey; height: 0; width: 60%;}
hr.three {border: 1px solid red; height: 2px; width: 70%;}
hr.four {border: 2px solid khaki; height: 2px; background-color: darkkhaki;}
hr.five {border: 0 ; border-top: 4px double blue; width: 90%;}
hr.six {border: 2px inset #eee; height: 1px; width: 80%;}
hr.seven {border: 0; height: 12px; box-shadow: inset 0 12px 12px -12px orange;}
hr.eight {border: 0; height: 0; box-shadow: 0 1px 5px 1px purple;}
hr.nine {border: 0; height: 2px; border-top: 1px dashed black; border-bottom: 1px dashed black;}
hr.ten {border: 0; height: 2px; text-align: center; background-image: linear-gradient(left, #fff, #000, #fff);}
hr.eleven {border: 3px solid #666; border-radius: 300px/10px; height: 0px; text-align: center;}
hr.twelve {border: 0; height: 0; text-align: center;font-size: 24px; line-height: 24px; text-align: center;}
hr.twelve:after {content:"\25ca\00a0\25ca\00a0\25ca\00a0\25ca"; position: relative; top: -12px; color: darkblue;}
hr.thirteen {border: 0; height: 24px; box-shadow: inset 0 22px 12px -12px green; color: green; text-align: center;}
hr.thirteen:after {content:"\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605"; font-size: 14px;color: #eee;}
hr.fourteen {border: 0; height: 0; border-top: 4px double black; text-align:center;}
hr.fourteen:after {position: relative; top: -22px; content:"\25cf\25cf\25cf"; font-size: 34px;line-height: 34px; color: black;}
hr.fiveteen {border: 0; height: 4px; margin-top: 20px;background-image: linear-gradient(left, #fff, red, #fff); text-align: center;}
hr.fiveteen:after {content:"<hr/>"; position: relative; top: -12px; display: inline-block; width: 36px; height: 24px; padding: 0;border: 2px solid red; border-radius: 24px; background: red; color: white; font-size: 12px; line-height: 24px; }

dabblet.html

<br/>
<hr class="zero"/>
<br/>
<hr class="one"/>
<br/>
<hr class="two"/>
<br/>
<hr class="three"/>
<br/>
<hr class="four"/>
<br/>
<hr class="five"/>
<br/>
<hr class="six"/>
<br/>
<hr class="seven"/>
<br/>
<hr class="eight"/>
<br/>
<hr class="nine"/>
<br/>
<hr class="ten"/>
<br/>
<hr class="eleven"/>
<br/>
<hr class="twelve"/>
<br/>
<hr class="thirteen"/>
<br/>
<hr class="fourteen"/>
<br/>
<hr class="fiveteen"/>

dabblet.js

// alert('Hello world!');

settings.json

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