CSS text-emphasis-color Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The text-emphasis-color CSS property is used to specify the color of emphasis marks applied to text using the ::before and ::after pseudo-elements. Emphasis marks are typically used in some East Asian typography to highlight specific characters or phrases within text. This property allows designers to customize the color of these emphasis marks, providing greater control over the visual presentation of text in languages and contexts where emphasis marks are employed. It is a part of CSS3 text emphasis module, designed to enhance typographic flexibility and aesthetics in web design.

Initial value: currentColor
Applies to: All elements
Inherited: Yes
Computed value: As specified
Animatable: Yes
JavaScript syntax: object.style.textEmphasisColor

Interactive Demo

text-emphasis-color: green;

text-emphasis-color: #AF5055;

text-emphasis-color: rgb(47, 51, 205);

text-emphasis-color: rgba(205, 47, 154, .5);

The rusty swing set creaked.

Syntax

text-emphasis-color: <color>

Values

<color>Specify the foreground color of the emphasis marks.

Example

HTML

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

<br>

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

CSS

em {
  text-emphasis-color: #3366FF;
  text-emphasis-style: "*";
}

Result

Editor

Browser Support

The following table will show you the current browser support for the CSS text-emphasis-color property.

Desktop

99	99	46	85	7

Tablets / Mobile

99	46	68	7	18	99

Last updated by CSSPortal on: 2nd January 2024

Support Us