1. ホーム
  2. css

[解決済み] UL/LIのhtmlリストで、画像やspanタグを使わずにCSSで箇条書きの色を設定する方法【重複

2022-03-18 23:10:42

質問

単純なソートされていないリストで、いくつかの <li> という項目があります。今、私は弾丸が正方形になるように list-style:square; しかし <li> の項目は color: #F00; では すべて が赤くなる!?

四角い弾丸の色だけを設定したいのに。このような場合 エレガントな方法 をCSSで定義してください。

スプライト画像やspanタグを一切使用せずに。

HTML

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

CSS

li{
   list-style:square;
}

解決方法は?

最も一般的な方法は、次のようなものです。

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 */
}
<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>

JSFiddleです。 http://jsfiddle.net/leaverou/ytH5P/

バージョン8以降のIEを含むすべてのブラウザで動作します。