The text-emphasis-style
CSS property defines the type of emphasis used. It can also be set, and reset, using the text-emphasis
shorthand.
/* Initial value */ text-emphasis-style: none; /* No emphasis marks */ /* value */ text-emphasis-style: 'x'; text-emphasis-style: '点'; text-emphasis-style: '\25B2'; text-emphasis-style: '*'; text-emphasis-style: 'foo'; /* Should NOT use. It may be computed to or rendered as 'f' only */ /* Keywords value */ text-emphasis-style: filled; text-emphasis-style: open; text-emphasis-style: filled sesame; text-emphasis-style: open sesame; /* Global values */ text-emphasis-style: inherit; text-emphasis-style: initial; text-emphasis-style: unset;
Initial value | none |
---|---|
Applies to | all elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
Values
none
- No emphasis marks.
filled
- The shape is filled with solid color. If neither
filled
noropen
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 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.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 25 -webkit- | ? | 46 45 — 491 | No | 15 -webkit- | Yes 6.1 -webkit- |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | 4.4 -webkit- | ? | ? | 46 45 — 491 | No | 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.
See also
- The related properties
text-emphasis-color
,text-emphasis
. - The
text-emphasis-position
property allowing to define the position of the emphasis marks.