画像や余分なタグのない HTML リストの箇条書きの色を変更する方法

画像やスパンタグを使用せずに HTML リストの箇条書きの色をカスタマイズする方法

課題

list-style: square; を使用して、並べ替えられていない HTML リストを四角形の箇条書きでカスタマイズする場合、リスト項目全体が箇条書きだけではなく指定された色になるという問題が発生する場合があります。ここで疑問が生じます: スプライト画像や追加のタグに頼らずに箇条書きの色を変更するにはどうすればよいですか?

解決策

シンプルで効果的な解決策存在します:

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS

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

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

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

このアプローチでは:

• リストスタイル: なし。デフォルトの箇条書きを削除します。
• padding-left と text-indent は、コンテンツの位置を調整します。
• li::before は、content プロパティを使用して箇条書きを挿入します。次に、color プロパティで目的の色を指定します。

この手法を使用すると、追加の要素や画像を必要とせずに、HTML リストの箇条書きの色をエレガントにカスタマイズできます。

以上が画像や余分なタグのない HTML リストの箇条書きの色を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。