「要素」を使用せずにリストの箇条書きの色をカスタマイズできますか?

スパンなしでリストの箇条書きをカスタマイズする方法

HTML では、箇条書きリストは項目を簡潔で順序立てて表示する方法を提供します。ただし、デフォルトでは箇条書きのスタイルは制限されており、スパンなどの追加要素を追加しないと変更できません。

スパンを使用せずにリストの箇条書きの色を変更できますか?

はい、リスト内に追加のマークアップを必要とせずに、CSS と :before 疑似要素を使用して箇条書きの色を変更できます。

実装

1. デフォルトの箇条書きスタイルを削除します:

   li {
     list-style: none;
   }

   ログイン後にコピー

2. :before 疑似要素でカスタムを表示しますBullet:

   li:before {
     content: '22'; /* Unicode character for a round bullet */
     display: block;
     position: relative;
     max-width: 0;
     max-height: 0;
     left: -10px;
     top: 0;
     color: green;
     font-size: 20px;
   }

   ログイン後にコピー

• content: 目的の箇条書きの形状の Unicode 文字を指定します。
• color: 箇条書きを設定しますcolor.
• font-size: 箇条書きのサイズを調整します。

注: このメソッドは最新のブラウザではうまく動作しますが、うまく動作しない場合があります。古い IE バージョンと互換性があること。

例HTML

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

以上が「要素」を使用せずにリストの箇条書きの色をカスタマイズできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。