Question

How can I left-align the numbers in an ordered list?

1.  an item // skip some items for brevity  9.  another item 10. notice the 1 is under the 9, and the item contents also line up 

Change the character after the number in an ordered list?

1) an item 

Also is there a CSS solution to change from numbers to alphabetic/roman lists instead of using the type attribute on the ol element.

I am mostly interested in answers that work on Firefox 3.

Answer 1

This is the solution I have working in Firefox 3, Opera and Google Chrome. The list still displays in IE7 (but without the close bracket and left align numbers):

ol {   counter-reset: item;   margin-left: 0;   padding-left: 0; } li {   display: block;   margin-bottom: .5em;   margin-left: 2em; } li::before {   display: inline-block;   content: counter(item) ') ';   counter-increment: item;   width: 2em;   margin-left: -2em; }

<ol>   <li>One</li>   <li>Two</li>   <li>Three</li>   <li>Four</li>   <li>Five</li>   <li>Six</li>   <li>Seven</li>   <li>Eight</li>   <li>Nine<br>Items</li>   <li>Ten<br>Items</li> </ol>

EDIT: Included multiple line fix by strager

Also is there a CSS solution to change from numbers to alphabetic/roman lists instead of using the type attribute on the ol element.

Refer to list-style-type CSS property. Or when using counters the second argument accepts a list-style-type value. For example the following will use upper roman:

li::before {   content: counter(item, upper-roman) ') ';   counter-increment: item; /* ... */