Propiedad 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:

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:

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:

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:

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:

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:

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;
}