The text-emphasis-style CSS property sets the appearance of emphasis marks. It can also be set, and reset, using the text-emphasis shorthand.
/* 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: unset;
Syntax
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 | no |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
none | [ [ filled | open ] | [ dot | circle | double-circle | triangle | sesame ] ] | <string>
Examples
h2 {
text-emphasis-style: sesame;
}
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Text Decoration Module Level 3 The definition of 'text-emphasis' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
text-emphasis-style | Chrome
Full support
25
| Edge
Full support
79
| Firefox
Full support
46
| IE No support No | Opera
Full support
15
| Safari
Full support
6.1
| WebView Android
Full support
4.4
| Chrome Android
Full support
25
| Firefox Android
Full support
46
| Opera Android
Full support
14
| Safari iOS
Full support
7
| Samsung Internet Android
Full support
1.5
|
Legend
- Full support
- Full support
- No support
- No support
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
See also
- The related properties
text-emphasis-color,text-emphasis. - The
text-emphasis-positionproperty allowing to define the position of the emphasis marks.
