当サイトは、一部記事に広告を含みます

【コピペ◎】CSSで強調したい文字の上に点をつける|コード解説付き

WebサイトやLPで、強調させたい文字の上に点々を付ける方法について。

わりとこういったデザインのWebサイトやLPがあるのですが、頻出でもないのでコードを覚えていられず・・・

いつもあれ?となるのでこちらに記載しておこうと思います✍️
いくつか方法はあると思うのですが、中でも使い勝手の良い方法を2つピックアップします。

  • text-emphasisを使う方法:👈簡単に実装したい場合はこっち
  • backgroundを使う方法:👈点の位置などにこだわりたい場合

前提:強調したい文字の上に点をつけるHTML

HTMLは下記のようなイメージ。
点をつけたい箇所をspanタグで囲いクラスを付与します。(今回は.u-dot

<div>
     <span className='u-dot'>こんな感じ</span>で文字の上に点をつける
</div>

text-emphasisで強調したい文字の上に点をつける方法

.u-dot {
    text-emphasis: filled;
    -webkit-text-emphasis: filled;
}

text-emphasisは縦書きや、点を文字の下につけることも可能です。
その場合にはtext-emphasis-positionを利用します✍️
https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-position

backgroundで強調したい文字の上に点をつける方法

.u-dot{
    background: top left / 1em .5em repeat-x radial-gradient(circle, red .06em, rgba(0,0,0,0) .06em);
    padding-top: .2em;
}
  • 点のサイズ.06emの部分で調整
  • 点と文字の間の余白padding-topで調整
  • 点の色redの部分で調整

以上です!

---

記事が気に入ったら、ぜひ応援いただけると更新がんばれます☕️

Buy Me A Coffee