text-emphasis
The text-emphasis CSS property sets position and style for text emphasis marks, especially for East Asian languages.
Overview
The text-emphasis CSS property sets position and style for text emphasis marks, especially for East Asian languages.
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 sets position and style for text emphasis marks, especially for East Asian languages.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features