Skip to content

Instantly share code, notes, and snippets.

@WebInspectInc
Created January 9, 2012 02:13
Show Gist options
  • Save WebInspectInc/1580621 to your computer and use it in GitHub Desktop.
Save WebInspectInc/1580621 to your computer and use it in GitHub Desktop.
Pseudo Element Transformation Tests
/**
* Pseudo Element Transformation Tests
* A test of 2-dimensional transforms on pseudo-elements.
*/
.content {
background:grey;
}
.content:after {
position:absolute;
content:"If the transforms don't work then there should be no orange showing.";
display:block;
height:100px;
width:300px;
background:pink;
transform:rotate(98deg) translate(100px,-50px) skewX(25deg);
}
.content:before {
position:absolute;
content:"";
display:block;
height:100px;
width:300px;
background:orange;
}
<!-- content to be placed inside <body>…</body> -->
<div class="content">Hello!</div>
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment