text-emphasis-color

Baseline Widely available

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.

Try it

text-emphasis-color: currentColor;

text-emphasis-color: red;

text-emphasis-color: rgba(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;
}

Syntax

/* Initial value */
text-emphasis-color: currentcolor;

/* <color> */
text-emphasis-color: #555;
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;

Values

<color>: Defines the color of the emphasis marks. If no color is present, it defaults to currentcolor.

Formal definition

Initial value	`currentcolor`
Applies to	all elements
Inherited	yes
Computed value	computed color
Animation type	a color

Formal syntax

text-emphasis-color = 
  <color>

Examples

Emphasis with a color and custom character

CSS

em {
  text-emphasis-color: green;
  text-emphasis-style: "*";
}

HTML

<p>Here's an example:</p>

<em>This has emphasis marks!</em>

Result

Specifications

Specification
CSS Text Decoration Module Level 3 # text-emphasis-color-property

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`text-emphasis-color`	9925	9979	46	8515	77	9925	46	6814	77	18.01.5	994.4