Skip to content

Instantly share code, notes, and snippets.

@QBobble
Created January 11, 2012 01:52
Show Gist options
  • Save QBobble/1592475 to your computer and use it in GitHub Desktop.
Save QBobble/1592475 to your computer and use it in GitHub Desktop.
Some <hr> Tests
/*
*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;
}
<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>
{"view":"split","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment