Original here: http://codeitdown.com/ordered-list-css-styles/

Styling ordered list numbers with CSS is not as simple as one might think because there is no CSS selector to target list numbers. Styling them is only possible with a simple CSS3 technique that uses a counter to replace the default numbers.

Styled numbers will only be visible in CSS3 browsers , but fallback is provided so that default unstyled numbers are displayed in old browsers.

<ol> CSS styling

CSS counters are variables which are incremented using CSS rules. By reseting a counter on every ol tag and then incrementing it on every li tag, we replicate the list numbering. Then simply set the li’s content as the counter value. To create your own ol CSS styles start with:

To use roman numerals change the content rule to <code>content: counter(ol-counter, upper-roman);</code> (for I,II,III,IV…). For letters, use lower-alpha (a,b,c,d…) or upper-alpha (A,B,C,D…). With the above code, no numbers are displayed in browsers that don’t support counters, like Internet Explorer 7 and below. Add the line <code>list-style-type: decimal !ie;</code> for a normal unstyled list to be displayed in IE7-. <h2>Some &lt;ol&gt; styles</h2> I leave you some &lt;ol&gt; CSS styles I created using the technique explained above. Feel free to copy and modify them, or use the code as is. All the examples make use of the IE7- hack to show an unstyled list. Removing the IE7- hack future-proofs the code (in case the line is read by a new browser, breaking the hack), but then no numbers will be displayed by those browsers. <h3 style=”color: #141412;”>Simple</h3> <p style=”color: #141412;”>Simple. Just a number and a border:</p> <p style=”color: #141412;”><img class=”aligncenter size-full wp-image-998 nopin” src=”http://codeitdown.com/wp-content/uploads/2014/02/simple-ol-css-style.png” alt=”Simple ordered list style” width=”600″ height=”auto” /></p>

ol.simple-list {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/

    margin: 0;
    margin-left: 3em;
    padding: 0;

    counter-reset: li-counter;
}
ol.simple-list > li{
    position: relative;
    margin-bottom: 20px;
    padding-left: 0.5em;
    min-height: 3em;
    border-left: 2px solid #CCCCCC;
}
ol.simple-list > li:before {
    position: absolute;
    top: 0;
    left: -1em;
    width: 0.8em;

    font-size: 3em;
    line-height: 1;
    font-weight: bold;
    text-align: right;
    color: #464646;

    content: counter(li-counter);
    counter-increment: li-counter;
}

Tilted

Tilted and partially covered numbers. Depending on your font, you may need to change the left propery of the pseudo-element to adjust the look.

ol.tilted-list {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/

    margin: 0;
    margin-left: 3em;
    padding: 0;

    counter-reset: li-counter;
}
ol.tilted-list > li{
    position: relative;
    margin-bottom: 20px;
    padding: 1em;
    border-left: 2px solid #CCCCCC;
    background-color: #f5f5f5;
}
ol.tilted-list > li:before {
    position: absolute;
    top: 0;
    left: -0.95em;
    width: 1em;

    font-size: 4em;
    line-height: 1;
    font-weight: bold;
    text-align: right;
    color: #464646;

    transform: rotate(-25deg);
    -ms-transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
    z-index: -99;
    overflow: hidden;

    content: counter(li-counter);
    counter-increment: li-counter;
}

Circles

Circles look great in color. Change border and background colors to fit your theme. Adding box shadow might engance the look.

ol.circles-list {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/

    margin: 0;
    margin-left: 4em;
    padding: 0;

    counter-reset: li-counter;
}
ol.circles-list > li{
    position: relative;
    margin-bottom: 20px;
    padding-left: 0.5em;
    min-height: 3em;
}
ol.circles-list > li:before {
    position: absolute;
    top: 0;
    left: -1.33em;
    width: 1.2em;
    height: 1.2em;

    font-size: 2.5em;
    line-height: 1.2;
    text-align: center;
    color: #f5f5f5;

    border: 3px solid #c5c5c5;
    border-radius: 50%;
    background-color: #464646;
    content: counter(li-counter);
    counter-increment: li-counter;
}

Boxes

ol.boxes-list {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/

    margin: 0;
    margin-left: 3em;
    padding: 0;

    counter-reset: li-counter;
}
ol.boxes-list > li{
    position: relative;
    margin-bottom: 15px;
    padding: 1em;

    background-color: #d5d5d5;
}
ol.boxes-list > li:before {
    position: absolute;
    top: 0;
    left: -1em;
    width: 0.94em;
    height: 0.94em;

    font-size: 3em;
    line-height: 0.94;
    text-align: center;
    color: #f5f5f5;

    background-color: #464646;
    content: counter(li-counter);
    counter-increment: li-counter;
}