Source code
Revision control
Copy as Markdown
Other Tools
<!-- Any copyright is dedicated to the Public Domain.
<html>
<head>
<style>
body {
color: #333;
}
.box {
float:left;
width: 128px;
height: 128px;
background: #ddd;
padding: 32px;
margin: 32px;
position:relative;
}
.box:first-line {
color: orange;
background: red;
}
.box:first-letter {
color: green;
}
* {
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: " ";
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;
}
.topleft:first-line {
color: orange;
}
.topleft::selection {
color: orange;
}
.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;
}
</style>
</head>
<body>
<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>
</body>
</html>