CSSだけでlist-styleのマーカーの色を変更する裏技

<ul>タグ内のリストのマーカーをdiscにしていたのですが、テキストの色と同じだと強すぎて少し薄くしたい場合、HTMLマークアップは変更することなく、CSSだけでlist-styleのマーカーの色を変更する方法を紹介します。

標準のリストマーカー

何も手を加えていない状態での<ul>、<li>は下のようになります。

黒く大きなマーカーは主張が強い印象があります。

CSSだけでリストマーカーを変更

方法としては、まず<ul>タグのlist-styleを無効にして、<li>タグの:before疑似要素に対して、マーカーを設定しています。

この方法なら、contentプロパティの中を変更すれば、下のようなスタイルも設定することが出来ます。

最近は、絵文字の国際標準化も進んできているようですので、いずれはリストマーカーももっと華やかなスタイルに変更出来るようになるかもしれません。

HTMLを修正する場合

上の方法以外に、HTMLマークアップに手を加えてリストマーカーの色を変更することも出来ます。