How can you customize 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

1) an item

<style type="text/css">
li {
   list-style-position:inside;
   margin-bottom:.5em;
}
li span {
   float:left;
   margin-left: 2em;
   margin-top:-1.25em;
}
</style>

<ol start="8">
   <li><span>Item</span></li>
   <li><span>Item</span></li>
   <li><span>Item</span></li>
   <li><span>Item</span></li>
</ol>

li {
    list-style-type: decimal;
    list-style-position: inside;
}

ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
<!--
ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
li {
  margin-bottom: .5em;
}
li:before {
  display: inline-block;
  content: counter(item, upper-roman) ")";
  counter-increment: item;
  width: 3em;
}
-->
</style>
</head>

<body>
<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</li>
  <li>Ten</li>
</ol>
</body>
</html>

li:before {
  content: counter(item) ") ";
  counter-increment: item;
  display: marker;
  width: 2em;
}

ol { list-style-type: decimal-leading-zero; }

<style type="text/css">
<!--
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;
}
-->
</style>
<body>
<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>

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

ol {
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
}

li {
    display: block;
    margin-left: 3.5em;          /* Change with margin-left on li:before.  Must be -li:before::margin-left + li:before::padding-right.  (Causes indention for other lines.) */
}

li:before {
    content: counter(item) ")";  /* Change 'item' to 'item, upper-roman' or 'item, lower-roman' for upper- and lower-case roman, respectively. */
    counter-increment: item;
    display: inline-block;
    text-align: right;
    width: 3em;                  /* Must be the maximum width of your list's numbers, including the ')', for compatability (in case you use a fixed-width font, for example).  Will have to beef up if using roman. */
    padding-right: 0.5em;
    margin-left: -3.5em;         /* See li comments. */
}

LI:before {
           display: marker;
           content: "(" counter(counter) ")";
           counter-increment: counter;
           width: 6em;
           text-align: center;
       }

<ol type="a">
    <li>Turn left on Maple Street</li>
    <li>Turn right on Clover Court</li>
</ol>

<html>
<head>
<style type='text/css'>

    ol { counter-reset: item; }

    li { display: block; }

    li:before { content: counter(item) ")"; counter-increment: item;
        display: inline-block; width: 50px; }

</style>
</head>
<body>
<ol>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
</ol>
</body>

<style type="text/css">
ol {
    list-style-position: inside;
}
li:first-letter {
    white-space: pre;
}
</style>

<ol>
<li>    an item</li>
<li>    another item</li>
...
</ol>

<style type="text/css">
ol {
    list-style-position: inside;
}
</style>

<ol>
    <li><pre>   </pre>an item</li>
    <li><pre>   </pre>another item</li>
    ...
</ol>