text-emphasis-color

Overview

The text-emphasis-color property is used to set the color of emphasis marks added to text. It's part of the text-emphasis shorthand, which also includes text-emphasis-style for setting the shape of the emphasis marks.

Examples and Usage

In the example below, we're using the text-emphasis-color and text-emphasis-style properties to create double circle emphasis marks of color #FBBF24 on a header. These properties together give us control over the appearance of the emphasis marks.

HTML Structure

<h2>Web Reference</h2>

CSS Styling

h2 {
  text-emphasis-style: double-circle; /* Define the style of the emphasis mark */
  text-emphasis-color: #FBBF24; /* Define the color of the emphasis mark */
}

The above effect can also be achieved using the text-emphasis shorthand stated as text-emphasis: double-circle #FBBF24;.

Now, let's take a look at the currentColor keyword.

h2 {
  text-emphasis-style: double-circle;
  text-emphasis-color: currentColor; /* The emphasis mark will adopt the current color of the text */
}

In this example, the currentColor keyword is specified only for demonstration purposes. If the color isn't explicitly specified, the default value for text-emphasis-color is currentColor, meaning the emphasis marks will match the current text color.

When it comes to choosing the color for text-emphasis-color, you have a wide array of options. You can use named colors, hex color codes, RGB or RGBA values for precise control of transparency, or HSL or HSLA values for an approach based on hue, saturation, and lightness.

Values

The text-emphasis-color property accepts the following values:

Associated Properties

• text-emphasis
• text-emphasis-style
• text-emphasis-position
• text-decoration (with related properties from the CSS Text Decoration Module)
• color
• background-color
• border-color

Tips and Tricks

• The text-emphasis-color property defaults to currentColor.

• Remember that the color of the emphasis marks should contrast well with the background for better readability.

• text-emphasis-color is used with text-emphasis-style as part of the text-emphasis shorthand for styling emphasis marks. While text-emphasis-position isn't part of the shorthand, it can be used alongside it to influence the placement of the emphasis marks. These properties can help create visually distinct text, subtly aiding comprehension, especially in the context of East Asian languages.

Browser Compatibility

Older versions of Chrome (25-98), Edge (79-98), and Opera (15-84), require vendor prefixes for proper functioning. For more details, refer to the first link in the Useful Resources below.

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: text-emphasis-color

W3C's Editor's Draft of CSS Text Decoration Module Level 3: text-emphasis-color