CSS 3: Decoración de texto

La futura recomendación CSS 3: Decoración de texto, actualmente (octubre de 2018) en elaboración, permite añadir al texto ciertos tipos de decoración que amplian los disponibles en CSS 2.

Decoración con líneas: text-decoration

Esta propiedad ya existía en CSS 2, aunque CSS 3 amplía sus posiblidades.

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

Actualmente (octubre de 2018), 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

Énfasis: text-emphasis

La propiedad text-emphasis 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 2018), 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 2018), 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