Here’s a neat solution. (Honestly I surprised myself with this.) CSS has something called counters, where you can set, for example, automatic chapter numbers on each heading. A bit of modification gives you the below; You’ll need to sort out padding etc yourself.
ol {
counter-reset: list;
}
ol > li {
list-style: none;
}
ol > li:before {
content: counter(list, lower-alpha) ") ";
counter-increment: list;
}<span>custom list style type (v1):</span>
<ol>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
<li>Number 4</li>
<li>Number 5</li>
<li>Number 6</li>
</ol>Works in all modern browsers and IE9+ (and possibly IE8 but may be buggy).
Update: I added child selector to prevent nested lists picking up the parent style. trejder also beings up a good point in the comments that the list item alignment is also messed up. An article on 456bereastreet has a good solution which involves absolutely positioning the counter.
ol {
counter-reset: list;
}
ol > li {
list-style: none;
position: relative;
}
ol > li:before {
counter-increment: list;
content: counter(list, lower-alpha) ") ";
position: absolute;
left: -1.4em;
}<span>custom list style type (v2):</span>
<ol>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
<li>Number 4</li>
<li>Number 5</li>
<li>Number 6</li>
</ol>Here is a jsFiddle showing the result, including nested lists.