W3cubDocs

/CSS

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⁩.

The text-emphasis-style CSS property sets the appearance of emphasis marks. It can also be set, and reset, using the text-emphasis shorthand.

Try it

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;
}

Syntax

/* Initial value */
text-emphasis-style: none; /* No emphasis marks */

/* <string> values */
text-emphasis-style: "x";
text-emphasis-style: "\25B2";
text-emphasis-style: "*";

/* Keyword values */
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;

/* Global values */
text-emphasis-style: inherit;
text-emphasis-style: initial;
text-emphasis-style: revert;
text-emphasis-style: revert-layer;
text-emphasis-style: unset;

Values

none: No emphasis marks.
filled: The shape is filled with solid color. If neither filled nor open is present, this is the default.
open: The shape is hollow.
dot: Display small circles as marks. The filled dot is '•' (U+2022), and the open dot is '◦' (U+25E6).
circle: Display large circles as marks. The filled circle is '●' (U+25CF), and the open circle is '○' (U+25CB).
double-circle: Display double circles as marks. The filled double-circle is '◉' (U+25C9), and the open double-circle is '◎' (U+25CE).
triangle: Display triangles as marks. The filled triangle is '▲' (U+25B2), and the open triangle is '△' (U+25B3).
sesame: Display sesames as marks. The filled sesame is '﹅' (U+FE45), and the open sesame is '﹆' (U+FE46).
<string>: Display the given string as marks. Authors should not specify more than one character in <string>. The UA may truncate or ignore strings consisting of more than one grapheme cluster.

Formal definition

Initial value	`none`
Applies to	all elements
Inherited	yes
Computed value	as specified
Animation type	discrete

Formal syntax

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

Examples

Basic example

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

Specifications

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

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`text-emphasis-style`	9925	9979	46	8515	77	9925	46	6814	77	18.01.5	994.4	77
`circle`	99	99	46	85	7	99	46	68	7	18.0	99	7
`dot`	99	99	46	85	7	99	46	68	7	18.0	99	7
`double-circle`	99	99	46	85	7	99	46	68	7	18.0	99	7
`filled`	99	99	46	85	7	99	46	68	7	18.0	99	7
`none`	99	99	46	85	7	99	46	68	7	18.0	99	7
`sesame`	99	99	46	85	7	99	46	68	7	18.0	99	7
`triangle`	99	99	46	85	7	99	46	68	7	18.0	99	7