Pseudo elements in an article

dabblet.css

/**
 * Pseudo elements in an article
 */

html {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
	font-family:helvetica;
}
h1 {
	font:40px 'lobster 1.4';
	border-bottom:1px solid;
	margin-left:60px;
}
h1:before {
	width:50px;
	height:50px;
	content:"";
	border-radius:100%/70% 1%;
	background:white;
	z-index:-1;
	position:absolute;
	margin-left:-60px;
	transition:.7s ease;
}
h1:after {
	position:relative;
	content: url('http://placekitten.com/200/300');
	clear:both;
	display:block;
	float:right;
}
h1:hover:before {
	transform:rotate(360deg);
	background:#333;
}

dabblet.html

<h1>Een titel van een tekst</h1>
<p>Cat ipsum dolor sit amet, donskoy and burmese and american bobtail savannah. Abyssinian balinese egyptian mau birman abyssinian . Egyptian mau havana brown. American bobtail havana brown for bobcat for himalayan. Lynx manx yet singapura for bombay devonshire rex. Kitten. Manx ocelot american shorthair and kitten. Turkish angora kitten. Persian american bobtail or turkish angora himalayan ragdoll. Tiger kitty lynx but thai manx or maine coon. Maine coon american bobtail. </p>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}