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