How can you customize the numbers in an ordered list?

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; /* ... */