text-emphasis
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.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 99 | 99 | 46 | 7 | 99 | 7 | |
| Other | ||||||
| The text-emphasis-color CSS property sets the color of emphasis marks. This value can also be set using the text-emphasis shorthand. | 99 | 99 | 46 | 7 | 99 | 7 |
| The text-emphasis-position CSS property sets where emphasis marks are drawn. Similar to the text rendered by the HTML element, if there isn't enough room for emphasis marks, the line height is increased. | 99 | 99 | 46 | 7 | 99 | 7 |
| CSS property | ||||||
auto Experimental Non-standard | | | 132 | | | |
left | 62 | 79 | 46 | 8 | 62 | 8 |
over | 99 | 99 | 108 | 7 | 99 | 7 |
right | 62 | 79 | 46 | 8 | 62 | 8 |
under | 99 | 99 | 108 | 7 | 99 | 7 |
| Other | ||||||
| The text-emphasis-style CSS property sets the appearance of emphasis marks. It can also be set, and reset, using the text-emphasis shorthand. | 99 | 99 | 46 | 7 | 99 | 7 |
| CSS property | ||||||
circle | 99 | 99 | 46 | 7 | 99 | 7 |
dot | 99 | 99 | 46 | 7 | 99 | 7 |
double-circle | 99 | 99 | 46 | 7 | 99 | 7 |
filled | 99 | 99 | 46 | 7 | 99 | 7 |
none | 99 | 99 | 46 | 7 | 99 | 7 |
sesame | 99 | 99 | 46 | 7 | 99 | 7 |
triangle | 99 | 99 | 46 | 7 | 99 | 7 |
- Available with a vendor prefix: -webkit- (25)
- Available with a vendor prefix: -webkit- (79)
- Available with a vendor prefix: -webkit- (7)
- Available with a vendor prefix: -webkit- (25)
- Available with a vendor prefix: -webkit- (7)
- Available with a vendor prefix: -webkit- (25)
- Available with a vendor prefix: -webkit- (79)
- Available with a vendor prefix: -webkit- (7)
- Available with a vendor prefix: -webkit- (25)
- Available with a vendor prefix: -webkit- (7)
- Available with a vendor prefix: -webkit- (25)
- Available with a vendor prefix: -webkit- (79)
- Available with a vendor prefix: -webkit- (7)
- Available with a vendor prefix: -webkit- (25)
- Available with a vendor prefix: -webkit- (7)
- Available with a vendor prefix: -webkit- (25)
- Available with a vendor prefix: -webkit- (79)
- Available with a vendor prefix: -webkit- (7)
- Available with a vendor prefix: -webkit- (25)
- Available with a vendor prefix: -webkit- (7)
Syntax
/* Basic emphasis */
.emphasis {
text-emphasis: filled sesame;
text-emphasis-color: #333;
}
/* Shorthand + position */
.emphasis-bottom {
text-emphasis: filled dot #e63946;
text-emphasis-position: under right;
}Live demo
triangleemphasis mark(bottomside)
text-emphasis triangleemphasis mark(bottomside) demo.
Use cases
-
Using text-emphasis
The text-emphasis CSS property applies emphasis marks to text (except spaces and control characters).
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.