dziudek/dabblet.css

## dabblet.css
/**
 * Animated dots for pagination - with links
 */

/* this implementation uses links instead of the :before pseudoelement */
ol {
	list-style-type:none;
	padding:0;
}

ol li {
	float:left;
	width:24px;
	height:24px;
	margin-left:10px;
	text-indent: -999px; /* here you can use the text-indent for text hiding */
}

ol li a {
	display: block;
	margin:4px;
	width:16px;
	height:16px;
	background: #a00;
	border-radius: 50%;
	transition: all 0.15s ease-out; /* will work currently also on Chrome */
}

ol li.active a,
ol li:hover a {
	width:24px;
	height:24px;
	background:#f00;
	margin:0;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<ol>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
</ol>

## settings.json
{"view":"split","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* Animated dots for pagination - with links
	*/

	/* this implementation uses links instead of the :before pseudoelement */
	ol {
	list-style-type:none;
	padding:0;
	}

	ol li {
	float:left;
	width:24px;
	height:24px;
	margin-left:10px;
	text-indent: -999px; /* here you can use the text-indent for text hiding */
	}

	ol li a {
	display: block;
	margin:4px;
	width:16px;
	height:16px;
	background: #a00;
	border-radius: 50%;
	transition: all 0.15s ease-out; /* will work currently also on Chrome */
	}

	ol li.active a,
	ol li:hover a {
	width:24px;
	height:24px;
	background:#f00;
	margin:0;
	}
	<!-- content to be placed inside <body>…</body> -->
	<ol>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	</ol>