Firefox Tomorrow

css property

`text-emphasis-color` CSS property

View on MDN ↗

The text-emphasis-color CSS property sets the color of emphasis marks. This value can also be set using the text-emphasis shorthand.

Interactive exampleOpen the canonical MDN source to run this embedded demo.
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

/* 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

Formal syntax

Examples

Emphasis with a color and custom character

CSS

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

HTML

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

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

Result

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also