The text-emphasis-color CSS property defines the color used to draw emphasis marks on text being rendered in the HTML document. This value can also be set and reset using the text-emphasis shorthand.

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

Initial valuecurrentcolor
Applies toall elements
Inheritedno
Mediavisual
Computed valuecomputed color
Animation typea color
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

Values

<color>
Defines the color of the emphasis marks. 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( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Examples

CSS

h3 {
  text-emphasis-color: #555;
  text-emphasis-style: "*";
}

HTML

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

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

Result

Specifications

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

Browser compatibility

 

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support25 -webkit- ?

46

45 — 491

No15 -webkit-

Yes

6.1 -webkit-

FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support4.4 -webkit- ? ?

46

45 — 491

33 -webkit- 7.1 ?

1. From version 45 until version 49 (exclusive): this feature is behind the layout.css.text-emphasis.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

 

See also

Document Tags and Contributors

Contributors to this page: fscholz, mfluehr, Sheppy, chrisdavidmills, teoli, yisibl, upsuper
Last updated by: fscholz,