text-emphasis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

La propiedad CSS de text-emphasis, es una propiedad abreviada para establecer los valores de text-empahasis-style y text-emphasis-color, en una sola declaración.

Esta propiedad aplicara el énfasis a cada carácter especificado en el texto del elemento, a excepción de caracteres separados como espacios y caracteres de control .

css

/* Valor Inicial */
text-emphasis: none; /* No emphasis marks */

/* <string> valor */
text-emphasis: "x";
text-emphasis: "点";
text-emphasis: "\25B2";
text-emphasis: "*" #555;
text-emphasis: "foo"; /* Should NOT use. It may be computed to or rendered as 'f' only */

/* Valor de la Palabra Clave */
text-emphasis: filled;
text-emphasis: open;
text-emphasis: filled sesame;
text-emphasis: open sesame;

/* Valor de la Palabra clave combinada con un color */
text-emphasis: filled sesame #555;

/* Valores Globales */
text-emphasis: inherit;
text-emphasis: initial;
text-emphasis: unset;

La propiedad text-emphasis es diferente a la propiedad text-decoration.

Text-decoration no hereda y la decoración se aplica atreves de todo el elemento. Sin embargo, la propiedad test-emphasis si hereda, lo que significa que es posible cambiar el énfasis para los descendientes.

The size of the emphasis symbol, like ruby symbols, is about 50% of the size of the font, and text-emphasis may affect line height when the current leading is not enough for the marks.

Nota: text-emphasis doesn't reset the value of text-emphasis-position. This is because if the style and the color of emphasis marks may vary in a text, it is extremely unlikely that their position will. In the very rare cases when this is needed, the property text-emphasis-position.

Valor inicial	as each of the properties of the shorthand: `text-emphasis-style`: `none` `text-emphasis-color`: `currentcolor`
Applies to	all elements
Heredable	yes
Valor calculado	as each of the properties of the shorthand: `text-emphasis-style`: como se especifica `text-emphasis-color`: computed color
Animation type	as each of the properties of the shorthand: `text-emphasis-color`: a color `text-emphasis-style`: discrete

Sintaxis

Valores

none: No emphasis marks.
filled: The shape is filled with solid color. If neither filled nor open is present, this is the default.
open: The shape is hollow.
dot: Display small circles as marks. The filled dot is '•' (U+2022), and the open dot is '◦' (U+25E6).
circle: Display large circles as marks. The filled circle is '●' (U+25CF), and the open circle is '○' (U+25CB). This is the default shape in horizontal writing modes when no other shape is given.
double-circle: Display double circles as marks. The filled double-circle is '◉' (U+25C9), and the open double-circle is '◎' (U+25CE).
triangle: Display triangles as marks. The filled triangle is '▲' (U+25B2), and the open triangle is '△' (U+25B3).
sesame: Display sesames as marks. The filled sesame is '﹅' (U+FE45), and the open sesame is '﹆' (U+FE46). This is the default shape in vertical writing modes when no other shape is given.
<string>: Display the given string as marks. Authors should not specify more than one character in <string>. The UA may truncate or ignore strings consisting of more than one grapheme cluster.
<color>: Defines the color of the mark. If no color is present, it defaults to currentColor.

Formal syntax

text-emphasis = 
  <'text-emphasis-style'>  ||
  <'text-emphasis-color'>  

<text-emphasis-style> = 
  none                                                |
  [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ]  |
  <string>                                            

<text-emphasis-color> = 
  <color>