CSS text-emphasis-color Property

Definition and Usage

The text-emphasis-color property sets the color of emphasis marks. It is a longhand of the text-emphasis shorthand and works with text-emphasis-style.

It is inherited. The initial value is currentColor, so marks match the text color until you override them. Color alone draws nothing until a style exists.

CSS Syntax

Any valid CSS color works: keywords, hex, rgb(), hsl(), currentColor, transparent, or var(--token).

Property Values

How to Use text-emphasis-color

Turn marks on with a style, then color them with this longhand.

1. Set a mark style: text-emphasis-style: filled circle.
2. Set the mark color: text-emphasis-color: red.
3. Or combine both: text-emphasis: filled circle red.
4. Use the longhand when color must cascade separately from style.

Live Preview

The sample already has filled-circle marks. Change only the mark color.

CSS Examples

Each snippet focuses on text-emphasis-color. A style is included only so the color is visible. Use Try It Yourself for a live editor.

<style>
  .mark {
    color: #0f172a;
    text-emphasis-style: filled circle;
    text-emphasis-color: currentColor;
  }
</style>

<p class="mark">Matches text color</p>

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

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

<style>
  .soft {
    text-emphasis-style: filled circle;
    text-emphasis-color: rgb(90 200 160 / 0.8);
  }
</style>

<p class="soft">Soft green marks</p>

Key Takeaways