●リスト の"●"を疑似要素にしてカスタマイズする

問題点

こんなリストがあったとします。

• リスト1
• リスト2
• リスト3

みなさんは●の部分の色を変えたいと思った時どうしているでしょうか。

<li><span>●</span>リスト1</li>

こんな感じでspanにCSSで色を付けたりしている方も多いと思います。
しかしこのやり方だとサイズの微調整が難しかったり、微妙に上や下にずれたり、HTMLコードが煩雑になったりして難点も多いです。

クラスをつけて疑似要素にする

See the Pen GRJovNR by sphenisc (@sphenisc) on CodePen.

●をつけたいリストにclass名をつけてCSSで疑似要素として●を付けています。 後から■や画像に変えるのもCSSから一気にできるので楽ちんです。