Propiedad text-decoration

DefiniciónEstablece la decoración que se añade al texto de un elemento
Valores
permitidos
La explicación de los valores permitidos para esta propiedad es compleja debido a su gran flexibilidad. Existen tres opciones diferentes para establecer el valor o valores de esta propiedad:
  1. El valor none
  2. Uno o más de los siguientes valores y en cualquier orden:
    • underline
    • overline
    • line-through
    • blink
  3. El valor inherit
Valor inicialnone
Se aplica aTodos los elementos
Válida enmedios visuales
Se heredano
Definición en
el estándar
w3.org/TR/CSS21/text.html#propdef-text-decoration

Ejemplos de uso

La propiedad text-decoration establece la decoración que se aplica al texto de un elemento. El estándar CSS 2.1 define los siguientes cinco tipos de decoraciones:

  • underline: se muestran subrayadas todas las líneas de texto.
  • overline: similar al valor underline, pero en este caso el subrayado se muestra en la parte superior de cada línea.
  • line-through: todas las líneas de texto se muestran tachadas mediante una línea continua en el medio de cada línea.
  • blink: el texto parpadea apareciendo y desapareciendo de forma alternativa.
  • none: el texto no muestra ninguna decoración, por lo que se eliminan todas las decoraciones que puede haber heredado el elemento.

En la práctica, los valores más utilizados son none para mostrar el texto sin adornos y underline para mostrar el texto subrayado. El valor line-through se emplea ocasionalmente para mostrar tachado un contenido erróneo o que ya no es válido. El valor overline apenas se utiliza, ya que su efecto es poco útil en la práctica. Por último, el valor blink nunca se emplea en los sitios web correctos, ya que suele molestar a la mayoría de usuarios y perjudica la accesibilidad del sitio web. De hecho, el propio estándar de CSS 2.1 aconseja que los navegadores no hagan parpadear el texto.

Los valores definidos por la propiedad text-decoration se pueden utilizar de forma individual y también de forma conjunta para crear efectos avanzados:

text-decoration: underline Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor.

text-decoration: overline Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor.

text-decoration: underline overline Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor.

text-decoration: blink Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor.

text-decoration: line-through Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor.

text-decoration: overline underline line-through Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor.

El color y el grosor de las líneas utilizadas en la decoración del texto no se pueden modificar. Todos los navegadores muestran las líneas con el mismo color que el de la letra del texto. En cuanto al grosor, algunos navegadores lo calculan automáticamente en función del tamaño de letra y otros navegadores muestran las líneas siempre con un grosor de 1px:

text-decoration: underline Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor.

text-decoration: underline Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor.

text-decoration: underline Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor.

Si un elemento incluye en su interior textos de diferentes colores y tamaños, la línea empleada en su decoración no cambia ni de color ni de grosor, sino que se utilizan el color y grosor calculados para el elemento principal:

text-decoration: underline Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor.

Por otra parte, los valores underline, overline y line-through sólo se aplican al contenido de texto, por lo que no se subrayan elementos como las imágenes. No obstante, cuando una imagen se muestra en el interior del texto, la mayoría de navegadores también le aplican todas las decoraciones:

Imagen en línea con el texto: se aplica el subrayado a las imágenes
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor.

Imagen independiente: no se aplica el subrayado

El código HTML y CSS del ejemplo anterior se muestra a continuación:

<div style="text-decoration: underline;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <img src="imagen.png" /> Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. <img src="imagen.png" /></div>
 
<img style="text-decoration: underline" src="imagen.png" />

Si un elemento tiene en su interior elementos posicionados de forma flotante o de forma absoluta, los valores de la propiedad text-decoration no se heredan en esos elementos.

Además, las líneas de los valores underline, overline y line-through se muestran tanto en el texto como en los espacios en blanco entre cada letra (letter-spacing) y cada palabra (word-spacing), pero no se muestran en los márgenes, bordes y rellenos:

letter-spacing: 3px

Lorem ipsum dolor sit amet

margin: 0.5em; padding: 0.5em

Lorem ipsum dolor sit amet

word-spacing: 15px

Lorem ipsum dolor sit amet

La propiedad text-decoration: underline parece similar a la propiedad border-bottom, pero en la práctica son muy diferentes. La principal diferencia es que text-decoration sólo subraya el contenido de texto, mientras que border-bottom subraya toda la caja del elemento, tal y como demuestran los dos párrafos del siguiente ejemplo:

text-decoration: underline Lorem ipsum dolor sit amet

border-bottom: 1px solid Lorem ipsum dolor sit amet

La otra gran diferencia es que el subrayado se realiza en la línea de base del texto, mientras que el borde inferior se realiza debajo del texto. En la práctica, esto significa que el subrayado se superpone con letras como g, j, p, q, y, pero el borde inferior siempre se muestra por debajo de cualquier letra.

La propiedad text-decoration se utiliza habitualmente con los enlaces, ya que permite ocultar el subrayado que muestran por defecto los enlaces. De hecho, en muchos sitios web es común encontrar la siguiente regla CSS:

a {
  text-decoration: none;
}

Además, combinando la propiedad text-decoration con la pseudo-clase :hover se pueden conseguir efectos avanzados. Prueba a pasar el ratón por encima de cada enlace para mostrar/ocultar el subrayado:

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

El efecto anterior también es muy utilizado en muchos sitios web, por lo que es común incluir las siguientes reglas CSS:

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}