☰

画像やスパンタグを使用せずに、CSS を介して UL/LI HTML リストの箇条書きの色を設定する方法 [重複] 質問する

tag-icon • tag-icon css layout colors html-lists
画像やスパンタグを使用せずに、CSS を介して UL/LI HTML リストの箇条書きの色を設定する方法 [重複] 質問する

いくつかの項目を含む単純な未ソートのリストを想像してください<li>。 ここで、 で箇条書きを四角形に定義しました。ただし、で項目 list-style:square;の色を設定すると、すべてが赤になります。<li>color: #F00;

四角い箇条書きの色だけを設定したいのですが、CSS で箇条書きの色を定義するエレガントな方法はありますか...

...スプライト画像やスパンタグを一切使用しません!

html

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

CS

li{
   list-style:square;
}

ベストアンサー1

これを行う最も一般的な方法は、次のようになります。

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/ より

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

おすすめ記事