CSS カウンターは、右括弧を使用するように HTML の下位アルファの順序付きリストをカスタマイズできますか?

下位アルファ順序付きリスト (HTML) での右括弧の使用

多くの Web サイトでは、コンテンツを構造化された順序で表示するために順序付きリストを採用しています。 。デフォルトでは、これらのリストはドット (「.」) を使用して各リスト項目を示します。ただし、右括弧 ("a)"、"b)" など、別のマーカーを使用したい場合もあります。

質問: は可能ですか? HTML の下位アルファ リスト スタイルをカスタマイズして、代わりに右括弧を使用します。ドット?

答え:

驚くべきことに、はい、CSS カウンターを使用してこの効果を実現する賢い方法があります。カウンタを使用すると、見出しやリスト項目などの要素に自動番号付けを設定できます。この機能を微調整することで、かっこを使用したカスタム リスト スタイルを作成できます。

これがどのように行われるかを示すコード スニペットです。

1. リセットCounter: counter-reset プロパティは、順序付けされたオブジェクトの「list」という名前のカウンターを初期化します。 list.
2. デフォルトのスタイルの削除: デフォルトのドット マーカーを削除するには、リスト項目に list-style: none を設定します。
3. カスタム マーカーの作成: li:before 疑似要素内で、content プロパティを使用してカスタム マーカーを生成します。ここで、counter(list, lower-alpha) は小文字のアルファベット文字 (a、b、c など) を指定し、") " を使用して右括弧を追加します。
4. カウンターをインクリメントします。 counter-increment: list は、リストごとに「list」カウンターを 1 つずつインクリメントします。 item.

注: リスト項目内で括弧を正しく配置するには、CSS でパディングとスペースを調整する必要がある場合があります。

以上がCSS カウンターは、右括弧を使用するように HTML の下位アルファの順序付きリストをカスタマイズできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。