Definition and Usage

The text-emphasis-color property specifies the color of emphasis marks applied to the text content of an element, as set by the text-emphasis-style property.

This property allows you to specify the color of the emphasis marks independently from the text color.

If no explicit color is specified, the emphasis mark color defaults to the element's computed text color.

Basic Example

CSS Live Demo: text-emphasis-color Click the demo button below!

Notes - Related Properties

In addition to the text-emphasis-color property, which sets the color of emphasis marks, there are other properties related to text emphasis styling. Using the following properties together can help you create more versatile emphasis effects on text:

Related properties of text-emphasis-color
text-emphasis-style Sets the shape of emphasis marks.
text-emphasis A shorthand property that sets both the shape and color of the emphasis marks.
text-emphasis-position Sets the position of the emphasis marks relative to the text.

Formal syntax

CSS 
selector {
    text-emphasis-color: <color>
}

Values

Accepted values for the text-emphasis-color property
<color> The color of the emphasis marks.

Syntax

CSS 
/* <color> values */
text-emphasis-color: currentcolor;
text-emphasis-color: red;
text-emphasis-color: #00a0e9;
text-emphasis-color: rgb(255, 255, 128);
text-emphasis-color: rgba(255, 255, 128, 0.5);
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;

Formal definition

Formal definition of the text-emphasis-color property
Initial value currentcolor (computed text color)
Applies to text
Inherited yes
Percentages n/a
Computed value computed color
Animation type by computed value type

Practical Example

CSS 
p span {
    text-emphasis-style: triangle;
    text-emphasis-color: red;
}
HTML 
<p>This text contains a <span>highlighted word</span>.</p>
Rendered Output

Browser compatibility

Browser compatibility for the text-emphasis-color property
Property
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
text-emphasis-color 99 99 46 7

Specifications

Specification for the text-emphasis-color property
Specification
text-emphasis-color CSS Text Decoration Module Level 4
#text-emphasis-color-property

References

See also