Pseudo element testing

by bgrins

HTML

<h1>ruleview pseudoelement($("test")); <small><a href="http://jsfiddle.net/bgrins/PRQ85/">edit this fiddle</a></small></h1>

<button>Toggle all styles</button>
<br />
<div id="topleft" class="box topleft">
    <p>Top Left<br />Position</p>
</div>

<div id="topright" class="box topright">
    <p>Top Right<br />Position</p>
</div>

<div id="bottomright" class="box bottomright">
    <p>Bottom Right<br />Position</p>
</div>

<div id="bottomleft" class="box bottomleft">
    <p>Bottom Left<br />Position</p>
</div>

CSS

body {
    color: #333;
}

.box {
    float:left;
    width: 128px;
    height: 128px;
    background: #ddd;
    padding: 32px;
    margin: 32px;
    position:relative;
}

* {
    cursor: default;
}

nothing {
    cursor: pointer;
}

p::-moz-selection {
    color: white;
    background: black;
}
p::selection {
    color: white;
    background: black;
}

p:first-line {
   background: blue;
}
p:first-letter {
  color: red;
  font-size: 130%;
}

.box:before {
    background: green;
    content: " ";
    font-family: Arial;
    position: absolute;
    height:32px;
    width:32px;
}

.box:after {
    background: red;
    content: " ";
    position: absolute;
    border-radius: 50%;
    height:32px;
    width:32px;
    top: 50%;
    left: 50%;
    margin-top: -16px;
    margin-left: -16px;
}

.topleft:before {
    top:0;
    left:0;
}

.topright:before {
    top:0;
    right:0;
}

.bottomright:before {
    bottom:10px;
    right:10px;
    color: red;
}

.bottomright:before {
    bottom:0;
    right:0;
}

.bottomleft:before {
    bottom:0;
    left:0;
}

JavaScript

var nextStyle = "";
document.querySelector("button").addEventListener("click", function() {
    var style = document.querySelector("style");
    var f = style.innerHTML;
    style.innerHTML = nextStyle;
    nextStyle = f;
});