《CSS》テキストの上に丸を追加して強調する

公開日：2023年10月30日　最終更新日：2025年4月23日

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