Cool ol li design using css3

HTML

<div class="numberlist">
    <ol>
        <li><a href="http://lesson8.blogspot.com/2013/08/cool-image-gallery-using-css3.html">Cool Image Gallery using CSS3</a>
        </li>
        <li><a href="http://lesson8.blogspot.com/2013/07/cool-social-sharing-button-using-css3.html">Cool Social Sharing Button using CSS3</a>
        </li>
        <li><a href="http://lesson8.blogspot.com/2013/07/counter-notification-css-on-inbox-top.html">Counter notification CSS on inbox top</a>
        </li>
        <li><a href="http://lesson8.blogspot.com/2013/07/cool-notification-css-style.html">Cool notification css style</a>
        </li>
        <li><a href="http://lesson8.blogspot.com/2013/07/custom-boxes-design-for-products-using.html">Custom boxes design for products using CSS3</a>
        </li>
        <li><a href="http://lesson8.blogspot.com/2013/07/cool-css-button-design-styles-with-icon.html">Cool css button design styles with icon and hover effect</a>
        </li>
    </ol>
</div>

CSS

.numberlist{width:450px;}
.numberlist ol{counter-reset:li;list-style:decimal;font:15px 'lucida sans';margin-bottom:4em;padding:0;}
.numberlist ol ol{margin:0 0 0 2em;}
.numberlist a{position:relative;display:block;background:#FFF;color:#444;text-decoration:none;-moz-border-radius:.3em;-webkit-border-radius:.3em;border-radius:.3em;margin:.5em 0;padding:.4em;}
.numberlist a:hover{background:#D8DFEA;text-decoration:underline;}
.numberlist a:before{content:counter(li);counter-increment:li;position:absolute;left:-1.3em;top:50%;margin-top:-1.3em;background:0;height:2em;width:2em;line-height:2em;border:.3em solid #fff;text-align:center;font-weight:bold;-moz-border-radius:2em;-webkit-border-radius:2em;border-radius:2em;color:#FFF;}
.numberlist a:hover:before{background:#fff;color:#000;border-color:#3B5998;}

DEMO