CSS text-emphasis-color

The CSS text-emphasis-color property sets the color of the emphasis marks that are drawn on text using the text-emphasis-style property.

Emphasis marks are small symbols drawn above or below each character of text (depending on the writing mode) to draw the reader's attention. They are commonly used in East Asian typography — particularly Chinese and Japanese — as an alternative to italic or bold text for emphasis, since these writing systems do not use italics in the same way as Latin scripts.

text-emphasis-color is a sub-property of the text-emphasis shorthand, which lets you set both the style and color in one declaration.

Syntax

Possible Values

currentColor

The default value. The emphasis marks are drawn in the same color as the element's color property.

<color>

Any valid CSS color value — such as a named color, hex value, rgb(), hsl(), or any other color notation — that will be used to paint the emphasis marks.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial

Represents the value specified as the property's initial value.

inherit

Represents the computed value of the property on the element's parent.

unset

This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

Example Code

Working Example

Related Properties

The text-emphasis-color property works in conjunction with the following properties:

• text-emphasis-style — Specifies the shape and fill of the emphasis marks (e.g., filled circle, open sesame, filled dot).
• text-emphasis — Shorthand that sets both text-emphasis-style and text-emphasis-color in a single declaration.
• text-emphasis-position — Controls whether emphasis marks appear above or below the text (e.g., over right for Japanese).

CSS Specifications

• The text-emphasis-color property is defined in CSS Text Decoration Module Level 3 (W3C Candidate Recommendation).

Browser Support

Browser support for CSS properties can vary, particularly for newer or experimental features. Check current browser compatibility before using a property in production, especially when supporting older browsers.

Initial Value

CSS properties have an initial value that applies when the property has not been explicitly set. The initial value is different from the value inherited from a parent element and may vary between properties.

Inheritance

Some CSS properties inherit their computed value from their parent element by default, while others do not. The inherit, initial, unset, and revert keywords can also be used to control how a property gets its value.

Vendor Prefixes

Most modern CSS properties use the standard, unprefixed syntax. Vendor-prefixed properties such as -webkit- are mainly relevant to older browser versions or specific features and should only be used when required by your browser support targets.