ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSのみを使用してHTMLリストの箇条書きの色を変更する方法?

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

Mary-Kate Olsen
リリース: 2024-12-25 10:44:11
オリジナル
710 人が閲覧しました

How to Change HTML List Bullet Colors Using Only CSS?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート