CSS を使用して Firefox 3 で順序付きリストをカスタマイズするにはどうすればよいですか?

Firefox 3 での順序付きリストのカスタマイズ

リスト番号の左揃え:

左へ-番号付きリスト内の数値を整列するには、次を使用します。 code:

li::before {
  display: inline-block;
  content: counter(item) ") ";
  counter-increment: item;
  width: 2em;
  margin-left: -2em;
}

このコードは、各リスト項目の前に、数値とそれに続く右括弧を表示する疑似要素を作成します。数値は 2em の固定幅内で左揃えされ、margin-left プロパティによりリスト項目から確実にインデントされます。

数値文字の変更:

順序付きリスト内の数字の後の文字を変更するには、li::before 宣言の content プロパティの値を変更します。たとえば、括弧の代わりにピリオドを使用するには、次を使用します。

content: counter(item) ".";

アルファベット/ローマ字リストの CSS ソリューション:

順序付きリストを変換するにはtype 属性を使用せずに数字からアルファベットまたはローマ字に変換するには、counter-reset、counter-increment、および list-style-type を使用します。 property:

ol {
  counter-reset: item;
}
li {
  counter-increment: item;
  list-style-type: none;
}
li::before {
  display: inline-block;
  content: counters(item, ".") " ";
}

このコードは、項目カウンターを 1 から開始するようにリセットし、リスト項目ごとにカウンターを増分し、list-style-type: none を使用してデフォルトの数値を非表示にします。次に、content プロパティは、アルファベットまたはローマ字とそれに続くピリオドを表示する擬似要素を作成します。

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