OL - Number In Circle

by bizamajig

HTML

<ol>
    <li>List item number one has some text to go along with it.</li>
    <li>List item number two has some text to go along with it as well.</li>
    <li>List item number three has some text to go along with it too, what did you expect?</li>
    
    <li>List item number three has some text to go along with it too, what did you expect?</li>
    <li>List item number three has some text to go along with it too, what did you expect?</li>
    <li>List item number three has some text to go along with it too, what did you expect?</li>
    <li>List item number three has some text to go along with it too, what did you expect?</li>
    <li>List item number three has some text to go along with it too, what did you expect?</li>
    <li>List item number three has some text to go along with it too, what did you expect?</li>
    <li>List item number three has some text to go along with it too, what did you expect?</li>
</ol>

CSS

ol {
    padding: 0 0 0 26px;
    list-style: none;
    overflow: hidden;
    counter-reset: numList;
}
ol li {
	margin: 0 0 12px 0;
    position: relative
}
ol li:before {
    counter-increment: numList;
    content: counter(numList);
    
    float: left;
    position: absolute;
    left: -26px;
    
    font: bold 12px sans-serif;
    text-align: center;
    color: #fff;
    line-height: 16px;
    
    width: 16px; height:16px;
    background: red;
    
    -moz-border-radius: 999px;
    border-radius: 999px
}