text-emphasis-color

Summary

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 valuecurrentColor
Applies toall elements
Inheritedno
Mediavisual
Computed valueIf 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).
Animatableyes, as a color
Canonical orderthe 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

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 46 (46)[1] 25.0-webkit Not supported 15.0-webkit 6.1-webkit
7.1
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support 46 (46)[1] 4.4-webkit Not supported 33-webkit 7.1

[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

Document Tags and Contributors

 Contributors to this page: teoli, yisibl, upsuper
 Last updated by: teoli,