CSS 3: Decoración de texto

La futura recomendación CSS 3: Decoración de texto, actualmente (marzo de 2017) 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 (mayo de 2017), estas propiedades funcionan en Firefox y Chrome, pero no Internet Explorer.

Correcto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
p {
  text-decoration: underline wavy red;
}

En CSS 3 se puede definir el tipo de subrayado con más detalle que en CSS2.

Correcto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
p {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

En CSS 3 se puede definir el tipo de subrayado con más detalle que en CSS2.

É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 (mayo de 2017), las propiedades text-emphasis, text-emphasis-style y text-emphasis-position funcionan en Firefox, pero no en Chrome o Internet Explorer.

Incorrecto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
p {
  text-emphasis: dot red;
}

En CSS 3 se puede enfatizar caracteres.

Incorrecto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
p {
  text-emphasis: circle red;
}

En CSS 3 se puede enfatizar caracteres.

Incorrecto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
p {
  text-emphasis: duble-circle red;
}

En CSS 3 se puede enfatizar caracteres.

Incorrecto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
p {
  text-emphasis: triangle red;
}

En CSS 3 se puede enfatizar caracteres.

Incorrecto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
p {
  text-emphasis: sesame red;
}

En CSS 3 se puede enfatizar caracteres.

Incorrecto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
p {
  text-emphasis: "X" red;
}

En CSS 3 se puede enfatizar caracteres.

Actualmente (mayo de 2017), la propiedad text-emphasis-position todavía no funciona en Firefox, Chrome o Internet Explorer.

Incorrecto en Chrome Incorrecto en Firefox Incorrecto en Internet Explorer
p {
  text-emphasis: duble-circle red;
  text-emphasis-position: under;
}

En CSS 3 se puede enfatizar caracteres.