Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8764

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

$
0
0

問題点

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

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

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

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

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

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

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

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


Viewing all articles
Browse latest Browse all 8764

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>