text-emphasis-color CSS property

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: rgb(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

css
/* Initial value */
text-emphasis-color: currentColor;

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

This property is specified as one <color> value:

<color>

Defines the color of the emphasis marks. If no color is present, it defaults to currentColor.

Formal definition

Initial valuecurrentcolor
Applies toall elements
Inheritedyes
Computed valuecomputed color
Animation typea color

Formal syntax

text-emphasis-color = 
  <color>

Examples

undefined

Emphasis with a color and custom character

CSS

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

HTML

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

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

Result

Specifications

See also