list-styleのマーカーの色を変更する方法を解説！

HTMLで箇条書きを表すul要素とそのアイテムのli要素ですが、デフォルトではlist-styleには以下のように黒丸のマーカーのアイコンが付きます。

今回はこの箇条書きの黒丸のマーカーの色を変更する方法について解説していきます。

やり方としては複数ありますので、それぞれサンプルコード付きで解説していきます。

まずは箇条書きのタグの中に更に別のタグ（今回はspanタグ）を追加して、マーカーの色を変更する方法です。

上記のサンプルコードではマーカーの色を赤に変更しています。

まずli要素の色を赤にします。（list-styleの色も赤になります。）

更にその中にspan要素をもうけ、span要素の色を黒に戻しています。この方法で箇条書きのマーカーのみ色を変更する事が出来ます。

次にli要素のlist-styleは非表示にして、::before疑似要素で別途マーカーを作成し、その色だけ変更する方法です。

この方法では独自でマーカーを設けていますので、別途サイズ感や余白を調整する必要が出てきます。

最後に疑似要素の::markerを使う方法です。この方法を使えば箇条書きの中のマーカー部分にのみスタイルを適用出来ます。

この方法でやるのが修正量が少なく、一番良さそうに見えるかもしれませんが::marker疑似要素のブラウザの対応状況を考慮する必要があります。

::marker疑似要素は全てのブラウザで対応しているわけではないので、利用の際にはブラウザの対応状況を見て問題なければ利用するようにしましょう。

::marker疑似要素のブラウザ対応状況は下記から確認することが出来ます。

いかがでしたでしょうか。箇条書きのマーカーに対して色をつける方法を解説してきました。

今回紹介したやり方で一番やりやすい方法でぜひ実装してみて下さい！