W3cubDocs

/CSS

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: 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()> | <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>? )

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

Examples

Emphasis with a color and custom character

CSS

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

HTML

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

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

Result

Specifications

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

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
text-emphasis-color 25
Prefixed
25
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
79
Prefixed
79
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
46
46
45 — 49
Disabled
Disabled 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.
No 15
Prefixed
15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
6.1
6.1
6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
text-emphasis-color 4.4
Prefixed
4.4
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
25
Prefixed
25
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
46
46
45 — 49
Disabled
Disabled 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.
14
Prefixed
14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
7
7
7
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
1.5
Prefixed
1.5
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-color