text-emphasis-color

The text-emphasis-color CSS property defines the color used to draw an emphasis mark. It can also be set, and reset, using the text-emphasis shorthand.

Initial value	currentColor
Applies to	all elements
Inherited	no
Media	visual
Computed value	If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
Animatable	yes, as a color
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

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

/* <color> */
text-emphasis-color: #555;
text-emphasis-color: blue;
text-emphasis-color: rgba(90, 200, 160, 0.8);
text-emphasis-color: transparent;

/* Global values */
text-emphasis-color: inherit;
text-emphasis-color: initial;
text-emphasis-color: unset;

Values

<color>

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

Formal syntax

<color>
where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
where 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

Examples

h2 {
  text-emphasis-color: #555;
}

Specifications

Specification	Status	Comment
CSS Text Decoration Level 3 The definition of 'text-emphasis' in that specification.	Candidate Recommendation	Initial definition

Browser compatibility

[1] In Firefox 45, it wasn't activated by default: in about:config, the user has to set the preference layout.css.text-emphasis.enabled to true.

See also

• The related properties text-emphasis-style, text-emphasis.
• The text-emphasis-position property allowing to define the position of the emphasis marks.