CSS – liの文字だけ色を変える

<li>にcolor:;を適用させたい場合、例の使い方で文字の色を変更することができます。

例

<ul>
  <li>sample</li>
  <li>sample</li>
  <li>sample</li>
</ul>

ul li{
  color: red;
}

liの文字とマーカーの色を分けたい場合

通常<li>にcolor:;を適用させようとするとマーカーまで色も適用されてしまいます。マーカーと文字の色を区別したい場合、疑似要素::markerを使うことでマーカーと文字の色を分けて適用させることができます。

/* マーカーの色 */
li::marker{
  color: green;
}

/* 文字の色 */
li{
  color: red;
}