問題点
こんなリストがあったとします。
- リスト1
- リスト2
- リスト3
みなさんは●の部分の色を変えたいと思った時どうしているでしょうか。
<li><span>●</span>リスト1</li>
こんな感じでspanにCSSで色を付けたりしている方も多いと思います。
しかしこのやり方だとサイズの微調整が難しかったり、微妙に上や下にずれたり、HTMLコードが煩雑になったりして難点も多いです。
クラスをつけて疑似要素にする
See the Pen GRJovNR by sphenisc (@sphenisc) on CodePen.
●をつけたいリストにclass名をつけてCSSで疑似要素として●を付けています。
後から■や画像に変えるのもCSSから一気にできるので楽ちんです。