How to style OL number points in CSS

Question

I'm trying to pretty up my order list items and I'm now wondering how I can achieve the following effect, and if it's even possible in pure CSS:

Is it possible to change the number-points and style them like this in just CSS, and if so, how?

Answer 1

Yes, this is possible with a combination of the :before pseudo element and CSS counter-increment.

The HTML:

<ol>
    <li>Lorem</li>
    <li>Lorem</li>
</ol>

And the CSS:

ol {
    counter-reset: li;
}

li {
    position: relative;
    list-style-type: none;
}

/* Style the before element how you want, the important bits here are the content element and counter-increment */
li:before {
    width: 1.75em;
    height: 1.75em;
    position: absolute; left: 0;        
    margin-right: 12px;       
    content: counter(li);
    counter-increment: li;
}