CSS を使用して、小文字のアルファベット数字と右かっこを含む順序付きリストを作成するにはどうすればよいですか?

下位アルファと右括弧を使用した順序付きリストの作成

下位アルファ数値のデフォルトの順序付きリスト スタイルでは、ドットが使用されます。ただし、このスタイルを変更して、代わりに右かっこを使用することはできますか?

順序付きリスト スタイルのカスタマイズ

CSS カウンターを使用して、カスタム リスト スタイルを確立できます。望ましい結果を達成する方法は次のとおりです:

ol {
  counter-reset: list;
}

ol > li {
  list-style: none;
}

ol > li:before {
  content: counter(list, lower-alpha) ") ";
  counter-increment: list;
}

この解決策をデモンストレーションするには:

<span>Custom List Style Type (v1):</span>
<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

このカスタム スタイルでは、下位のアルファ数値とそれに続く右付きの順序付きリスト項目がレンダリングされます。括弧:

a) 数値 1
b) 数値 2
c) 数値3
d) 番号 4
e) 番号 5
f) 番号 6

特定のニーズに合わせて、パディングやその他のスタイルの側面を調整する必要がある場合があることに注意してください。

以上がCSS を使用して、小文字のアルファベット数字と右かっこを含む順序付きリストを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。