rounded ol counter

rounded ol counter

<ol class="rounded ">
	<li><a> </a></li>
	<li><a> </a></li>
	<li><a> </a></li>
	<li><a> </a></li>
	<li><a> </a></li>
</ol>


.rounded {
	counter-reset: li; 
	list-style: none; 
	padding: 0;
}

.rounded  a {
	position: relative;
	display: block;
	padding: .18em .4em .18em 2em;
	margin: .1em 0;
	color: #000;
	text-decoration: none;
	border-radius: .2em;
}

.rounded a:before {
	position: absolute;
	left: -1.3em;
	top: 50%; 
	margin-top: -.8em;
	height: 1.7em;
	width: 1.7em;
	border: .2em solid #B10E1C;
	text-align: center;
	font-weight: bold;
	border-radius: 2em;
	transition: all .3s ease-out;
}

.rounded.block_01 a:before {
	content: counter(li);
	counter-increment: li;
}