《CSS》テキストの上に丸をつけて強調する

公開日：2023年10月30日　最終更新日：2025年3月27日

CSS

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(circle, #cf5747 25%, transparent 26%) top right / 1em .5em repeat-x;
	padding-top: .5em;
}

Ad