CSS のみを使用して HTML リストの箇条書きの色を変更するにはどうすればよいですか?

画像やインライン要素のない HTML リストの箇条書きの色を設定する

順序なしリストのスタイルを設定するときに、箇条書きの色を変更したい場合があります。リスト項目のテキストには影響を与えません。

の色を設定するだけですが、要素は機能し、テキストの色も変更されます。

エレガントな CSS のみのソリューション

答えは ::before 疑似要素にあります:

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

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

li::before {
  content: "•";
  color: #F00;
}

このコードは、画像やインライン要素に頼ることなく、目的の効果を実現します。その仕組みは次のとおりです。

• list-style: none;
• ::before は、各
• の前に位置する疑似要素を作成します。 item.
• content: "•" は、目的の箇条書きを円盤または正方形として指定します。
• color: #F00;箇条書きの色を設定します。
• padding-left と text-indent を使用してリスト項目のテキストをインデントすると、箇条書きと確実に揃えられます。

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