Pseudo Element Testing

Test page for pseudo elements in devtools

by bgrins

HTML

<h1>ruleview pseudoelement($("test"));</h1>

    <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

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

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: " ";
    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;
}