Notification Counter

dabblet.css

/**
 * Notification Counter
 */

div {
	width: 150px;
	height: 150px;
	background: #fea;
	border-radius: 50%;
	margin: 10px;
	position: relative;
	border: 2px solid #ed8;
}

.small {
	width: 80px;
	height: 80px;
}

.big {
	width: 240px;
	height: 240px;
}

span {
	background: #aef;
	position: absolute;
	width: 2em;
	height: 2em;
	line-height: 2em;
	top: 14%; /* Вот и вся магия */ 
	left: 14%;
	margin: -1em;
	border-radius: 50%;
	border: 1px solid #99c;
	text-align: center;
}

dabblet.html

<div class="small">
	<span>1</span>
</div>

<div>
	<span>8</span>
</div>

<div class="big">
	<span>22</span>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"90","seethrough":"","prefixfree":"1","page":"css"}