text-emphasis-style

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

We'd love to hear more about your role and the company you work for

Please help us by answering a few questions.

text-emphasis-style は CSS のプロパティで、圏点の表示を設定します。設定やリセットに一括指定の text-emphasis を使用することもできます。

試してみましょう

text-emphasis-style: none;

text-emphasis-style: triangle;

text-emphasis-style: "x";

text-emphasis-style: filled double-circle;

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

p {
  font: 1.5em sans-serif;
}

構文

css

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

/* <string> 値 */
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: dot;
text-emphasis-style: circle;
text-emphasis-style: double-circle;
text-emphasis-style: triangle;
text-emphasis-style: filled sesame;
text-emphasis-style: open sesame;

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

値

none: 圏点なし。
filled: 図形は単色で塗りつぶされます。 filled も open も指定されない場合は、これが既定値です。
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 文字を超える文字列を指定しないでください。ユーザーエージェントは、2 文字以上の書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。

公式定義

初期値	`none`
適用対象	すべての要素
継承	あり
計算値	指定通り
アニメーションの種類	離散値

形式文法

text-emphasis-style = 
  none                                                |
  [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ]  |
  <string>

例

基本的な例

css

h2 {
  -webkit-text-emphasis-style: sesame;
  text-emphasis-style: sesame;
}

仕様書

Specification
CSS Text Decoration Module Level 3 # text-emphasis-style-property