ul li のリスト部分のみ色を変更する方法 2パターン

2021年3月18日

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

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

仕上がりイメージ

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

  • いちばんめ
  • にばんめ
  • spanでテキストの色を変更する方法
  • 疑似要素でリストの色を変更する方法

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を使用してリスト部分の色を変更する方法です。

lilist-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を使用する場合、数字部分はこの方法では変更できません(他の方法で変更可能です。いずれご紹介したいと考えています)。