CSS のみを使用して HTML リストの箇条書きをエレガントに色付けするにはどうすればよいですか?

CSS を使用した HTML リストの箇条書きの色付け: エレガントなアプローチ

多くの開発者が、順序なしリスト (UL) の箇条書きの色をカスタマイズするという課題に直面しています。画像スプライトやスパンタグに頼らずに、HTML と CSS を使用してアイテム (LI) をリストします。この記事では、この目標を簡単に達成できる包括的なソリューションについて説明します。

箇条書きの形状を正方形として定義したが、LI 項目の色を変更するとすべてが赤に変わるシナリオを考えてみましょう。箇条書きの色付けを分離するには、CSS の機能を活用した洗練されたソリューションが必要です。

最も広く使用されている方法には、次の手順が含まれます:

1. ネイティブの箇条書きを削除します: UL で list-style: none を設定して、デフォルトのリストの箇条書きを削除します。 element.
2. コントロール テキスト インデント: 箇条書きを正しく配置するには、削除された箇条書きを補うために LI 要素に負のテキスト インデントを適用します。
3. 箇条書きの疑似要素を作成: CSS 疑似要素 (::before) を使用して、カスタムの箇条書きコンテンツを挿入します。 content プロパティは任意のシンボルに設定でき、color プロパティは箇条書きの色を指定するために使用できます。

コード スニペットの例を次に示します。

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 1em;
  text-indent: -.7em;
}

li::before {
  content: "• ";
  color: red; /* or any preferred color */
}

<ul>
  <li>Foo</li>
  <li>Bar</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>

このアプローチは、HTML リストの箇条書きの色をカスタマイズする柔軟かつ効率的な方法を提供し、画像や追加の HTML 要素を使用せずに望ましい視覚効果を実現できます。

以上がCSS のみを使用して HTML リストの箇条書きをエレガントに色付けするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。