Summary
The text-emphasis CSS property is a shorthand property for setting text-emphasis-style and text-emphasis-color in one declaration. This property will apply the specified emphasis mark to each character of the element's text, except separator characters, like spaces, and control characters.
The text-emphasis property is quite different from text-decoration. The text-decoration property does not inherit, and the decoration specified is applied across the whole element. However, text-emphasis does inherit, which means it is possible to change emphasis marks for descendents.
The size of the emphasis symbol, like ruby symbols, is about 50% of the size of the font, and text-emphasis may affect line height when the current leading is not enough for the marks.
text-emphasis doesn't reset the value of text-emphasis-position. This is because if the style and the color of emphasis marks may vary in a text, it is extremely unlikely that their position will. In the very rare cases when this is needed, the property text-emphasis-position.
| Initial value | as each of the properties of the shorthand:
|
|---|---|
| Applies to | all elements |
| Inherited | no |
| Media | visual |
| Computed value | as each of the properties of the shorthand:
|
| Animatable | as each of the properties of the shorthand:
|
| Canonical order | order of appearance in the formal grammar of the values |
Syntax
/* Initial value */
text-emphasis: none; /* No emphasis marks */
/* <string> value */
text-emphasis: 'x';
text-emphasis: '点';
text-emphasis: '\25B2';
text-emphasis: '*' #555;
text-emphasis: 'foo'; /* Should NOT use. It may be computed to or rendered as 'f' only */
/* Keywords value */
text-emphasis: filled;
text-emphasis: open;
text-emphasis: filled sesame;
text-emphasis: open sesame;
/* Keywords value combined with a color */
text-emphasis: filled sesame #555;
/* Global values */
text-emphasis: inherit;
text-emphasis: initial;
text-emphasis: 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). This is the default shape in horizontal writing modes when no other shape is given. 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). This is the default shape in vertical writing modes when no other shape is given. <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. <color>- Defines the color of the mark. If no color is present, it defaults to
currentColor.
Formal syntax
How to read CSS syntax.<'text-emphasis-style'> || <'text-emphasis-color'>
Examples
h2 {
/* text-emphasis: shape color; */
text-emphasis: triangle #555;
}Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Text Decoration Level 3 The definition of 'text-emphasis' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
[1] In Firefox 45, it wasn't activated by default: in about:config, the user has to set the preference layout.css.text-emphasis.enabled to true.
See also
- The longhand properties
text-emphasis-style,text-emphasis-color. - The
text-emphasis-positionproperty allowing to define the position of the emphasis marks.