This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
The text-emphasis-color CSS property sets the color of emphasis marks. This value can also be set using the text-emphasis shorthand.
text-emphasis-color: currentColor;
text-emphasis-color: red;
text-emphasis-color: rgb(90 200 160 / 0.8);
<section id="default-example">
<p>
I'd far rather be
<span class="transition-all" id="example-element">happy than right</span>
any day.
</p>
</section>
p {
font: 1.5em sans-serif;
}
#example-element {
text-emphasis: filled;
}
/* Initial value */ text-emphasis-color: currentColor; /* <color> */ text-emphasis-color: #555555; text-emphasis-color: blue; text-emphasis-color: rgb(90 200 160 / 80%); text-emphasis-color: transparent; /* Global values */ text-emphasis-color: inherit; text-emphasis-color: initial; text-emphasis-color: revert; text-emphasis-color: revert-layer; text-emphasis-color: unset;
<color>Defines the color of the emphasis marks. If no color is present, it defaults to currentColor.
| Initial value | currentcolor |
|---|---|
| Applies to | all elements |
| Inherited | yes |
| Computed value | computed color |
| Animation type | a color |
text-emphasis-color =
<color>
em {
text-emphasis-color: green;
text-emphasis-style: "*";
}
<p>Here's an example:</p> <em>This has emphasis marks!</em>
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
text-emphasis-color |
9925 | 9979 | 46 | 8515 | 77 | 9925 | 46 | 6814 | 77 | 18.01.5 | 994.4 | 77 |
<color> data typetext-emphasis-style, text-emphasis, and text-emphasis-position.color, background-color, border-color, outline-color, text-shadow, caret-color, and column-rule-color
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-color