The text-emphasis
CSS property applies emphasis marks to text (except spaces and control characters). It is a shorthand for text-emphasis-style
and text-emphasis-color
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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
.
Constituent properties
This property is a shorthand for the following CSS properties:
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
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
). 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 definition
Initial value |
as each of the properties of the shorthand:
|
Applies to | all elements |
Inherited | no |
Computed value |
as each of the properties of the shorthand:
|
Animation type |
as each of the properties of the shorthand:
|
Formal syntax
<'text-emphasis-style'> || <'text-emphasis-color'>
Examples
A heading with emphasis shape and color
This example draws a heading with triangles used to emphasize each character.
CSS
h2 {
text-emphasis: triangle #D55;
}
HTML
<h2>This is important!</h2>
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Text Decoration Module Level 3The 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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
text-emphasis
|
Chrome Full support 25 Full support 25 Prefixed' Implemented with the vendor prefix: -webkit- |
Edge Full support 79 Full support 79 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Full support 46 Full support 46 No support 45 — 49 Disabled' From version 45 until version 49 (exclusive): this feature is behind the |
IE
No support No |
Opera Full support 15 Full support 15 Prefixed' Implemented with the vendor prefix: -webkit- |
Safari Full support 6.1 Full support 6.1 Full support 6.1 Prefixed' Implemented with the vendor prefix: -webkit- |
WebView Android Full support 4.4 Full support 4.4 Prefixed' Implemented with the vendor prefix: -webkit- |
Chrome Android Full support 25 Full support 25 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Android Full support 46 Full support 46 No support 45 — 49 Disabled' From version 45 until version 49 (exclusive): this feature is behind the |
Opera Android Full support 14 Full support 14 Prefixed' Implemented with the vendor prefix: -webkit- |
Safari iOS Full support 7 Full support 7 Full support 7 Prefixed' Implemented with the vendor prefix: -webkit- |
Samsung Internet Android Full support 1.5 Full support 1.5 Prefixed' Implemented with the vendor prefix: -webkit- |
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 longhand properties
text-emphasis-style
,text-emphasis-color
. - The
text-emphasis-position
property allowing to define the position of the emphasis marks.
text-emphasis by Mozilla Contributors is licensed under CC-BY-SA 2.5.