text-emphasis-color

La propiedad CSS text-emphasis-color (que podría traducirse como color del texto con énfasis) define el color de las marcas de énfasis. Este valor también puede definirse usando el atajo text-emphasis

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

/* Valores globales */
text-emphasis-color: inherit;
text-emphasis-color: initial;
text-emphasis-color: unset;

Valor inicial	`currentcolor`
Applies to	all elements
Heredable	no
Media	visual
Valor calculado	computed color
Animation type	a color
Canonical order	el orden único no-ambigüo definido por la gramática formal

Sintáxis

Valores

<color>: Define el color de las marcas de énfasis. Si ningún color es declarado, el color por defecto es currentColor (color actual).

Sintáxis Formal

<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>

Ejemplos

CSS

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

HTML

<p>Este es un ejemplo:</p>

<h3>Esto está marcado con énfasis!</h3>

Resultado

Ejemplo incrustado en vivo

Especificaciones

Especificaciones	Estado	Comentario
CSS Text Decoration Module Level 3 La definición de 'text-emphasis' en esta especificación.	Candidate Recommendation	Initial definition

Compatibilidad de Navegadores

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome para Android	Edge Mobile	Firefox para Android	Opera para Android	Safari en iOS	Samsung Internet
`text-emphasis-color`	Chrome Soporte completo 25 Prefijado Soporte completo 25 Prefijado Prefijado Requiere de un prefijo de vendedor : -webkit-	Edge Sin soporte No	Firefox Soporte completo 46 Soporte completo 46 Sin soporte 45 — 49 Deshabilitado Deshabilitado 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.	IE Sin soporte No	Opera Soporte completo 15 Prefijado Soporte completo 15 Prefijado Prefijado Requiere de un prefijo de vendedor : -webkit-	Safari Soporte completo Si Soporte completo Si Soporte completo 6.1 Prefijado Prefijado Requiere de un prefijo de vendedor : -webkit-	WebView Android Soporte completo 4.4 Prefijado Soporte completo 4.4 Prefijado Prefijado Requiere de un prefijo de vendedor : -webkit-	Chrome Android Soporte completo 25 Prefijado Soporte completo 25 Prefijado Prefijado Requiere de un prefijo de vendedor : -webkit-	Edge Mobile ?	Firefox Android Soporte completo 46 Soporte completo 46 Sin soporte 45 — 49 Deshabilitado Deshabilitado 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.	Opera Android Soporte completo 14 Prefijado Soporte completo 14 Prefijado Prefijado Requiere de un prefijo de vendedor : -webkit-	Safari iOS Soporte completo 7.1	Samsung Internet Android ?

Leyenda

Soporte completo: Soporte completo
Sin soporte: Sin soporte
Compatibilidad desconocida: Compatibilidad desconocida
El usuario debe de habilitar explícitamente esta característica.: El usuario debe de habilitar explícitamente esta característica.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.: Requiere de un prefijo de proveedor o un de nombre diferente para su uso.

Ver También

El tipo de dato <color>.
Las otras propiedades de marcas de énfasis relacioanadas: text-emphasis-style, text-emphasis, y text-emphasis-position.
Otras propiedades relacionadas al color: color, background-color, border-color, outline-color, text-emphasis-color, text-shadow, caret-color, y column-rule-color
Aplicando color a los elementos HTML utilizando CSS.