The text-emphasis-color CSS property sets the color of emphasis marks. This value can also be set 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: revert; text-emphasis-color: unset; 

text-emphasis-color

The text-emphasis-color CSS property sets the color of emphasis marks. This value can also be set 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: revert; text-emphasis-color: unset; 

Syntax

Values

<color>

Defines the color of the emphasis marks. If no color is present, it defaults to currentcolor.

Formal definition

Initial value	currentcolor
Applies to	all elements
Inherited	no
Computed value	computed color
Animation type	a color

Formal syntax

<color>
where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )
where <alpha-value> = <number> | <percentage><hue> = <number> | <angle>

Examples

Emphasis with a color and custom character

CSS

em {   -webkit-text-emphasis-color: green;   text-emphasis-color: green;   -webkit-text-emphasis-style: "*";   text-emphasis-style: "*"; } 

HTML

<p>Here's an example:</p>  <em>This has emphasis marks!</em> 

Result

Specifications

Specification
CSS Text Decoration Module Level 3 # text-emphasis-color-property

See also

The <color> data type The other emphasis mark related properties: text-emphasis-style, text-emphasis, and text-emphasis-position. Other color-related properties: color, background-color, border-color, outline-color, text-emphasis-color, text-shadow, caret-color, and column-rule-color Applying color to HTML elements using CSS

Last modified: Sep 22, 2021, by MDN contributors

Select your preferred language English (US)EspañolFrançais日本語 Change language