Firefox 3 (およびそれ以降) で順序付きリストをカスタマイズするにはどうすればよいですか?

Firefox 3 で順序付きリストをカスタマイズする

リストの番号を左揃えにする

順序付きリストの番号を左揃えにするには、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;
}

リスト後の文字の変更数字

リスト番号の後の文字を変更するには、li::before ルールの content プロパティを変更します:

li::before {
  ...
  content: counter(item) "a) ";
  ...
}

アルファベット/ローマ字リストへの変換

CSS を使用して数値からアルファベットまたはローマ字のリストに変換し、counter-reset、counters() 関数、コンテンツを組み合わせて使用​​します。プロパティ:

ol {
  list-style-type: none;
  counter-reset: my-counter;
}

li {
  display: block;
  counter-increment: my-counter;
}

li::before {
  content: counters(my-counter, lower-alpha) ". ";
  ...
}

ローマ数字の場合:

li::before {
  content: counters(my-counter, lower-roman) ". ";
  ...
}

この手法は、Internet Explorer 7 などの古いブラウザでは機能しない可能性があることに注意してください。

以上がFirefox 3 (およびそれ以降) で順序付きリストをカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。