ulやolを使った際に表示されるリストマーカーがありますが、もしもデフォルトとは違う色を使う必要が出てきた場合、わざわざ画像を用意して表示させたりしていませんか？そんなことをしなくとも、簡単にリストマーカーに色を付ける方法をご紹介します。
HTML
1 | <ul class="sampleList"> |
2 | <li><span>サンプルサンプルサンプル</span></li> |
3 | <li><span>サンプルサンプルサンプル</span></li> |
4 | <li><span>サンプルサンプルサンプル</span></li> |
5 | </ul> |
CSS
1 | .sampleList li { |
2 | color: #FF0000; |
3 | } |
4 | .sampleList span { |
5 | color: #000000; |
6 | } |
たったこれだけです。li要素に色指定をすることで、リストマーカーも含めli内のすべての要素の色が指定されるので、文字列などをspanタグで囲み、改めて文字色を指定し直すことで、リストマーカーの色を指定することが可能です。
