CSS text-emphasis

CSS の text-emphasis は文字を強調する記号とその色を指定するプロパティで、text-emphasis-style と text-emphasis-color を一つの宣言で設定できる。

text-emphasis: style color

style と color の順序は任意である。

style

文字を強調する記号の種類を指定する。

値	説明
none	なし
filled	ベタ塗り
open	中空
dot	傍点
circle	円
double-circle	二重丸
triangle	三角形
sesame	読点

<span style="text-emphasis-style: black dot">傍点</span>
<span style="text-emphasis-style: black double-circle">二重丸</span>
<span style="text-emphasis-style: black triangle">三角形</span>
<span style="text-emphasis-style: black sesame">読点</span>

傍点二重丸三角形読点

color

文字を強調する記号の色を指定する。

<span style="text-emphasis-style: dot red">赤</span>
<span style="text-emphasis-style: dot green">緑</span>
<span style="text-emphasis-style: dot blue">青</span>

赤緑青

text-emphasis-style

text-emphasis-style は文字を強調する方法を指定する。

text-emphasis-style: style

style

文字を強調するスタイル

値	説明
none	なし
filled	ベタ塗り
open	中空
dot	傍点
circle	円
double-circle	二重丸
triangle	三角形
sesame	読点

<span style="text-emphasis-style: filled">filled</span>
<span style="text-emphasis-style: open">open</span>
<span style="text-emphasis-style: dot">傍点</span>
<span style="text-emphasis-style: circle">circle</span>
<span style="text-emphasis-style: double-circle">二重丸</span>
<span style="text-emphasis-style: triangle">三角形</span>
<span style="text-emphasis-style: sesame">読点</span>

filled open 傍点 circle 二重丸三角形読点

text-emphasis-color

text-emphasis-color は文字を強調する色を指定するCSSプロパティである。

text-emphasis-color: color

<span style="text-emphasis-style: dot; text-emphasis-color: red">赤</span>

赤

text-emphasis-position

text-emphasis-position は文字を強調する記号の位置を指定するCSSプロパティである。

text-emphasis-position: position

position

強調の位置

値	説明
over	上
under	下
right	右
left	左

<span style="text-emphasis-style: dot text-emphasis-position: under">傍点</span>

傍点

参考文献

World Wide Web Consortium (2022) CSS Text Decoration Module Level 3

CSS text-emphasis

text-emphasis-style

text-emphasis-color

text-emphasis-position

関連記事

参考文献