最終更新日 2021年6月2日

text-emphasis-styleプロパティ

text-emphasis-styleは、要素内のテキストに強調マークを適用するプロパティです。強調マーク自体は、1/2のフォントサイズで表示されます。

値は「none」「filled」「open」「dot」「circle」「double-circle」「triangle」「sesame」「文字列」があります。初期値は「none」です。

このプロパティは、値の組み合わせ方のルールが複雑なので、正規表現を以下に示します。正規表現の読み方は「仕様書内の値定義の読み方」を参考にして下さい。

none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>

CSS3での変更点

・text-emphasis-styleは、CSS3から新しく追加されたプロパティです。

初期値	適用先	継承
none	すべての要素	あり

値	説明
none	強調マークを付けません。（初期値）
filled	強調マークを単一色で塗りつぶします。
open	強調マークを中抜きにします。
dot	小さな円を表示します。塗りつぶしは「•」、中抜きは「◦」です。
circle	大きな円を表示します。塗りつぶしは「●」、中抜きは「○」です。
double-circle	2重丸を表示します。塗りつぶしは「◉」、中抜きは「◎」です。
triangle	三角形を表示します。塗りつぶしは「▲」、中抜きは「△」です。
sesame	ゴマを表示します。塗りつぶしは「﹅」、中抜きは「﹆」です。
文字列	マークとして使用する文字を1文字指定します。

サンプルコード

text-emphasis-style: none;
text-emphasis-style: filled dot;
text-emphasis-style: filled circle;
text-emphasis-style: filled double-circle;
text-emphasis-style: filled triangle;
text-emphasis-style: filled sesame;
text-emphasis-style: open dot;
text-emphasis-style: open circle;
text-emphasis-style: open double-circle;
text-emphasis-style: open triangle;
text-emphasis-style: open sesame;
text-emphasis-style: "★";

参考文献：CSS Text Level 3

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。