The text-emphasis-style CSS property sets the appearance of emphasis marks. It can also be set, and reset, using the text-emphasis shorthand.
text-emphasis-style
Try it
Syntax
css
/* Initial value */
text-emphasis-style: none; /* No emphasis marks */
/* <string> values */
text-emphasis-style: "x";
text-emphasis-style: "点";
text-emphasis-style: "\25B2";
text-emphasis-style: "*";
text-emphasis-style: "foo"; /* Should NOT be used. It may be computed to or rendered as 'f' only */
/* 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
fillednoropenis 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
Examples
Basic example
css
h2 {
-webkit-text-emphasis-style: sesame;
text-emphasis-style: sesame;
}
Specifications
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
text-emphasis-style |
9925 | 9979 | 46 | No | 8515 | 77 | 994.4 | 9925 | 46 | 6814 | 77 | 18.01.5 |
See also
- The related properties
text-emphasis-color,text-emphasis. - The
text-emphasis-positionproperty allowing to define the position of the emphasis marks.
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-style