Text Decoration

La propiedad text-decoration prácticamente se explica sola: te permite decorar un texto de diferentes maneras. Se usa más comúnmente para subrayar tu texto:

<div style="text-decoration: underline;">Hello, world!</div>

Sin embargo, tiene más posibilidades. Por ejemplo, la puedes usar para tachar tu texto:

<div style="text-decoration: line-through;">Hello, world!</div>

Ahora, la parte divertida de la propiedad text-decoration es que te permite aplicar varios valores a la vez:

<div style="text-decoration: overline underline;">Hello, world!</div>

Inténtalo

Como ejemplo final, permíteme mostrarte todos los valores posibles en un mismo ejemplo, con una línea de obsequio usándolos todos a la vez:

<style type="text/css">
div {
	margin: 30px 0;
}
</style>

<div style="text-decoration: overline;">Hello, world!</div>

<div style="text-decoration: line-through;">Hello, world!</div>

<div style="text-decoration: underline;">Hello, world!</div>

<div style="text-decoration: underline overline line-through;">Hello, world!</div>

En resumen

La propiedad text-decoration te hace fácil el añadir lineas alrededor o a través de tu texto, pero recuerda que no son un borde, la(s) línea(s) dibujadas por la propiedad text-decoration siempre tendrán el mismo color del texto. Si necesitas una línea de color diferente debajo o encima de tu texto, debes usar las propiedades de borde.