How can you customize the numbers in an ordered list?
HTML5: Use the value
attribute (no CSS needed)
Modern browsers will interpret the value
attribute and will display it as you expect. See MDN documentation.
<ol>
<li value="3">This is item three.</li>
<li value="50">This is item fifty.</li>
<li value="100">This is item one hundred.</li>
</ol>
Also have a look at the <ol>
article on MDN, especially the documentation for the start
and attribute.
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;
/* ... */
The CSS for styling lists is here, but is basically:
li {
list-style-type: decimal;
list-style-position: inside;
}
However, the specific layout you're after can probably only be achieved by delving into the innards of the layout with something like this (note that I haven't actually tried it):
ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }