[解決済み] 順序付きリストの数字をカスタマイズするには？

質問

順序付きリストの数字を左揃えにするにはどうしたらよいでしょうか。

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

また、ol要素のtype属性を使用する代わりに、数字からアルファベット/ローマ字のリストに変更するCSSソリューションはありますか？

私は主に Firefox 3 で動作する答えに興味があります。

どのように解決するのですか？

これは、私が Firefox 3、Opera、および Google Chrome で動作させている解決策です。リストは IE7 でも表示されます (ただし、閉じ括弧と左揃えの数字がありません)。

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です。 strager氏による複数行の修正を含む

また、ol要素のtype属性を使用する代わりに、数字からアルファベット/ローマ字のリストに変更するCSSソリューションはありますか。

参照先 リストスタイルタイプ CSS プロパティを参照してください。また、カウンターを使用する場合は、第2引数にlist-style-typeの値を指定します。例えば、以下は upper roman を使用します。

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