custom numbered lists with css

Question

Is there a way to control the text used for the numbering?

For example, is there a way to have the list automatically do something like this:

First,     blah-blah
Second,    blah-blah
Third,     blah-blah
Fourth,    blah-blah
etc.

Answer 1

Check this fiddle: http://jsfiddle.net/yR6G6/

What we are doing here is adding a pseudo :before element to each LI and customizing its content with JavaScript.

NOTE: This solution assumes you are ok using JS and jQuery. A pure CSS solution is likely not possible at all.

---

HTML

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

CSS

ul li:before {
    content: attr(data-label);
    color: red;
    text-align: right;
    padding-right: 10px;
    font-size: 11px;
    width: 60px;
    display: inline-block;
}

JS

var labels = [
    "First",
    "Second",
    "Third"
    // and so on...    
];

$('ul li').each(function(i) {
    $(this).attr('data-label', labels[i]);
});