W3cubDocs

text-emphasis-color

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 value	`currentcolor`
Applies to	all elements
Inherited	no
Media	visual
Computed value	computed color
Animation type	a color
Canonical order	the 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

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	25 -webkit-	?	46 45 — 49¹	No	15 -webkit-	Yes 6.1 -webkit-

Feature

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

Basic support

25 -webkit-

45 — 49¹

15 -webkit-

Yes

6.1 -webkit-

Feature	Android webview	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
Basic support	4.4 -webkit-	?	?	46 45 — 49¹	No	33 -webkit-	7.1

Feature

Android webview

Chrome for Android

Edge mobile

Firefox for Android

IE mobile

Opera Android

iOS Safari