CSS 3 / CSS 4: Decoración de texto

Las futuras recomendaciones CSS 3: Decoración de texto y CSS 4: Decoración de texto, actualmente (octubre de 2019) en elaboración, permiten añadir al texto ciertos tipos de decoración que amplian los disponibles en CSS 2.

CSS 3 Decoración con líneas: text-decoration

Esta propiedad ya existía en CSS 2, aunque CSS 3: Decoración de texto (actualmente -octubre de 2019- en elaboración) amplía sus posibilidades.

Las propiedades de decoración de texto mediante una línea son las siguientes:

Actualmente (octubre de 2019), la propiedad text-decoration funciona en Chrome, Firefox y Edge.

p {
  text-decoration: underline wavy red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

CSS 4 Decoración con líneas: text-decoration

Algunas propiedades que los navegadores no admiten todavía se han incoporado en la futura recomendación CSS 4: Decoración de texto, actualmente (octubre de 2019) en elaboración.

Las propiedades de decoración de texto mediante una línea son las siguientes:

CSS 3 Énfasis: text-emphasis

La propiedad text-emphasis de CSS 3: Decoración de texto (actualmente -octubre de 2019- en elaboración) está pensada para añadir un símbolo al texto. Estos símbolos se utilizan en los lenguajes asiáticos orientales para enfatizar el texto.

Actualmente (octubre de 2019), las propiedades text-emphasis, text-emphasis-style y text-emphasis-position funcionan en Firefox y Edge, pero no en Chrome.

Incorrecto en Chrome Correcto en Firefox Correcto en Edge
p {
  text-emphasis: dot red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Correcto en Firefox Correcto en Edge
p {
  text-emphasis: circle red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Correcto en Firefox Correcto en Edge
p {
  text-emphasis: double-circle red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Correcto en Firefox Correcto en Edge
p {
  text-emphasis: triangle red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Correcto en Firefox Correcto en Edge
p {
  text-emphasis: sesame red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Correcto en Firefox Correcto en Edge
p {
  text-emphasis: "X" red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Actualmente (octubre de 2019), la propiedad text-emphasis-position funciona en Firefox, pero no en Chrome y en Edge.

Incorrecto en Chrome Correcto en Firefox Incorrecto en Edge
p {
  text-emphasis: double-circle red;
  text-emphasis-position: under;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

CSS 4 Énfasis: text-emphasis

Algunas propiedades que los navegadores no admiten todavía se han incoporado en la futura recomendación CSS 4: Decoración de texto, actualmente (octubre de 2019) en elaboración.