WebInspectInc · January 9, 2012 02:13
diff --git a/dabblet.css b/dabblet.css
 /**
 * 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;
 }
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->
 <div class="content">Hello!</div>
diff --git a/settings.json b/settings.json
 {"view":"split","prefixfree":"1","page":"css"}
	/**
	* 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>