《CSS》テキストの上に丸をつけて強調する
公開日:2023年10月30日 最終更新日:2024年2月27日
CSSでテキストの上に丸をつけます。
長文につけるとうるさいので、短い言葉につける方がいいです。
数値やカラーコードを変更すると丸の大きさや色が変わります。
DEMO
テキストの一部を強調したい
テキストの一部を強調強調強調強調
強調強調したい
HTML
<p>テキストの一部を<span class="text-emphasis">強調</span>したい</p>
<p>テキストの一部を<span class="text-emphasis">強調強調強調強調<br>強調強調</span>したい</p>
CSS
background: radial-gradient(グラデーションの中心座標、グラデーションの中心、グラデーションの開始色、グラデーションの終了色とその位置、グラデーションの終了地点から先を透明にするための色指定)、背景の位置/背景のサイズ、背景画像の繰り返し表示
.text-emphasis {
background: radial-gradient(.15em .15em at center center,#cf5747,#cf5747 100%,transparent) top right / 1em .5em repeat-x;
padding-top: .5em;
}