CSSのみを使用してHTMLリストの箇条書きの色を変更する方法?

HTML リストの箇条書きの色のスタイルを設定する方法

Q: を使用せずに、並べ替えられていない HTML リストの箇条書きの色を変更するにはどうすればよいですか?画像かスパンタグですか?

A: これは、を使用したエレガントなソリューションです。 CSS:

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

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

li::before {
  content: "• ";
  color: red; /* or whatever color you prefer */
}

HTML:

<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>

これにより、画像やスパム タグを使用せずに、赤色の四角い箇条書きが得られます。

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