We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

CSStext-emphasis-style プロパティは、使用される圏点の種類を定義します。一括指定の text-emphasis を使用して、設定したり解除したりすることもできます。

/* 初期値 */
text-emphasis-style: none; /* 圏点なし */

/* 値 */
text-emphasis-style: 'x';
text-emphasis-style: '点';
text-emphasis-style: '\25B2';
text-emphasis-style: '*';
text-emphasis-style: 'foo'; /* 使用するべきではない。計算されるか 'f' のみが表示される */

/* キーワード値 */
text-emphasis-style: filled;
text-emphasis-style: open;
text-emphasis-style: filled sesame;
text-emphasis-style: open sesame;

/* グローバル値 */
text-emphasis-style: inherit;
text-emphasis-style: initial;
text-emphasis-style: unset;

初期値none
適用対象全要素
継承不可
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

none
圏点なし。
filled
図形は単色で塗りつぶされます。 filledopen もない場合は、これが既定値です。
open
図形はくりぬかれます。
dot
記号として小さな円を表示します。 filled dot は '•' (U+2022)、 open dot は '◦' (U+25E6) です。
circle
記号として大きな円を表示します。 filled circle は'●' (U+25CF)、 open circle は '○' (U+25CB) です。
double-circle
記号として二重丸を表示します。 filled double-circle は '◉' (U+25C9)、 open double-circle は '◎' (U+25CE) です。
triangle
記号として三角形を表示します。 filled triangle は '▲' (U+25B2)、 open triangle は '△' (U+25B3) です。
sesame
記号としてゴマを表示します。 filled sesame は '﹅' (U+FE45)、 open sesame は '﹆' (U+FE46) です。
<string>
記号として文字列を表示します。 <string> には1文字を超える文字列を指定しないでください。ユーザーエージェントは、1つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。

形式文法

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

h2 {
  text-emphasis-style: sesame;
}

仕様策定状況

仕様書 策定状況 コメント
CSS Text Decoration Module Level 3
text-emphasis の定義
勧告候補 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応25 -webkit- ?

46

45 — 491

なし15 -webkit-

あり

6.1 -webkit-

機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応4.4 -webkit- ? ?

46

45 — 491

33 -webkit- 7.1 ?

1. From version 45 until version 49 (exclusive): this feature is behind the layout.css.text-emphasis.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, momdo
最終更新者: mfuji09,