はじめに

リストタグulliは、設定しない場合は、リスト部分「・」とテキストが同じ色で表示されます。

リスト部分のみ色を変更したい場合、私は以下の目次にあるいずれかの方法で設定しています。

仕上がイメージ

リスト部分「・」を赤、テキストを青で表示させています。

目次

spanでテキストの色を変更する方法

liで色を設定した場合、リスト部分を含めテキスト全体がその色で表示されます。

この方法ではspanで別の色を設定し、上書きして表示させるようなイメージになります。

html

<ul class="test">
　<li><span>いちばんめ</span></li>
　<li><span>にばんめ</span></li>
</ul>

CSS

.test {
　list-style-position: inside;
　color: #ff0000;
}
.test span {
　color: #0000ff;
}

できあがったもの

リストを追加する度にspanを書く必要があるので、更新の時に若干面倒かな、というのが印象です。

一方で、この方法の場合はolを使用する場合でも数字部分のみの色変更も可能です。

疑似要素でリストの色を変更する方法

疑似要素:beforeを使用してリスト部分の色を変更する方法です。

liはlist-style:none;とし、疑似要素でリスト部分の形と色を設定します。

html

<ul class="test">
　<li>いちばんめ</li>
　<li>にばんめ</li>
</ul>

CSS

.test {
　list-style:none;
}
.test li {
　color: #0000ff;
}
.test li:before {
　content: '・';
　color: #ff0000;
}

できあがったもの

spanを使用しないので、htmlの追加・修正はやりやすいと思います。個人的にはちらの方が好みです。

一方で、いったんlist-style:none;とする必要があるので、デフォルトのlist-styleは使用できす、疑似要素内のcontent:でリスト部分を設定する必要があります。

また、olを使用する場合list-style:none;が影響して数字部分が表示されないので、この方法は使えません。

olを使用した場合はol liの数字部分のみ色を変える方法　2パターンを参考にしてみてください。