This is perfectly possible to do with just CSS (2.1):
ol.custom {
list-style-type: none;
margin-left: 0;
}
ol.custom > li {
counter-increment: customlistcounter;
}
ol.custom > li:before {
content: counter(customlistcounter) " ";
font-weight: bold;
float: left;
width: 3em;
}
ol.custom:first-child {
counter-reset: customlistcounter;
}
Keep in mind that this solution relies on the :before pseudo-selector, so some older browsers — IE6 and IE7 in particular — won’t render the generated numbers. For those browsers, you’ll want to add an extra CSS rule that targets just them to use the normal list-style:
ol.custom {
*list-style-type: decimal; /* targets IE6 and IE7 only */
}