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

公開日：2023年10月30日　最終更新日：2024年12月6日

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

広告