text-emphasisBaseline · Widely available
The text-emphasis CSS property sets position and style for text emphasis marks, especially for East Asian languages.
Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Mar 3, 2022. Widely available since Sep 3, 2024.
Browser support
DesktopChrome
1–98Not supported
99+Supportedsince Mar 1, 2022
Current: 155Edge
12–98Not supported
99+Supportedsince Mar 3, 2022
Current: 154Firefox
1–45Not supported
46+Supportedsince Apr 26, 2016
Current: 157Safari
1–6Not supported
7+Supportedsince Oct 22, 2013
Current: 27MobileChrome Android
18–98Not supported
99+Supportedsince Mar 1, 2022
Current: 155Firefox Android
4–45Not supported
46+Supportedsince Apr 26, 2016
Current: 157Safari iOS
1–6Not supported
7+Supportedsince Sep 18, 2013
Current: 27How to use
This feature is Baseline widely available — use it freely, no fallback needed.
Example
Full syntax and examples are on MDN: text-emphasis.
Feature detection
CSS · check before using
@supports (text-emphasis: initial) {
/* styles that rely on text-emphasis */
}
/* or in JavaScript */
if (CSS.supports("text-emphasis", "initial")) {
// use it
}Documentation (MDN)
Specification
Usage share
Sub-features
Support for each part of the feature (20). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| text-emphasis | 99 | 99 | 46 | 7 | 99 | 46 | 7 |
| text-emphasis-color | 99 | 99 | 46 | 7 | 99 | 46 | 7 |
| text-emphasis-color.currentColor | 99 | 99 | 46 | 7 | 99 | 46 | 7 |
| text-emphasis-color.transparent | 99 | 99 | 46 | 7 | 99 | 46 | 7 |
| text-emphasis-position | 99 | 99 | 46 | 7 | 99 | 46 | 7 |
| text-emphasis-position.auto | ✕ | ✕ | 132 | ✕ | ✕ | 132 | ✕ |
| text-emphasis-position.left | 99 | 99 | 46 | 8 | 99 | 46 | 8 |
| text-emphasis-position.over | 99 | 99 | 108 | 7 | 99 | 108 | 7 |
| text-emphasis-position.right | 99 | 99 | 46 | 8 | 99 | 46 | 8 |
| text-emphasis-position.under | 99 | 99 | 108 | 7 | 99 | 108 | 7 |
| text-emphasis-style | 99 | 99 | 46 | 7 | 99 | 46 | 7 |
| text-emphasis-style.circle | 99 | 99 | 46 | 7 | 99 | 46 | 7 |
| text-emphasis-style.dot | 99 | 99 | 46 | 7 | 99 | 46 | 7 |
| text-emphasis-style.double-circle | 99 | 99 | 46 | 7 | 99 | 46 | 7 |
| text-emphasis-style.filled | 99 | 99 | 46 | 7 | 99 | 46 | 7 |
| text-emphasis-style.none | 99 | 99 | 46 | 7 | 99 | 46 | 7 |
| text-emphasis-style.sesame | 99 | 99 | 46 | 7 | 99 | 46 | 7 |
| text-emphasis-style.triangle | 99 | 99 | 46 | 7 | 99 | 46 | 7 |
| text-emphasis.currentColor | 99 | 99 | 46 | 7 | 99 | 46 | 7 |
| text-emphasis.transparent | 99 | 99 | 46 | 7 | 99 | 46 | 7 |