soy Kseso y esto EsCSS

Anulando el text-decoration heredado

Explicación de la propiedad Css "text-decoration" y una forma sencilla forma (también con Css) de anular el valor de text-decoration heredado por los descendientes.

Anulando el text-decoration heredado

·Por Kseso ✎ 1
Anulando el text-decoration heredado

Caso práctico: un enlace con un elemento decorativo, como un ▼, y por tus razones quieres aplicar el text-decoration al :hover. Habrás observado lo feo y antiestético que queda el triángulo con el subrayado.
Por más que intentas pisar el valor para volverlo a none, es imposible removerlo... hasta ahora.

Tal como en el ejemplo de abajo. El emoticono :-( está en un span y la ▼ en el pseudoelemento ::after y ambos son parte del enlace. Haz hover para que aparezca el subrayado. Y a continuación abre el inspector de código de tu navegador e intenta anular el valor de text-decoration del span o del pseudoelemento.

:-(Efecto Feo

Por más que se intente anular declarando valores diferentes para text-decoration en el span y el pseudo-elemento nada es efectivo.

La propiedad text-decoration en la especificación

Pero antes de seguir con la solución, es conveniente ver qué dice la especificación al respecto:

text-decoration
Esta propiedad describe las decoraciones que se agregan al texto de un elemento. Si la propiedad es especificada para un elemento a nivel de bloque, afecta a todos los descendientes a nivel de línea del elemento. Si es especificada para (o afecta) un elemento a nivel de línea, afecta a todas las cajas generadas por el elemento. Si el elemento no tiene ningún contenido o ningún contenido textual (ej., el elemento IMG en HTML), las aplicaciones del usuario deben ignorar esta propiedad.

Y continúa y matiza:

El(los) color(es) requerido por la decoración del texto deberían derivar del valor de la propiedad 'color'.
Esta propiedad no es heredada, pero las cajas descendientes de una caja de bloque deberían tener en su formato la misma decoración (ej., deberían estar todas subrayadas). El color de las decoraciones debería permanecer igual aunque los elementos descendientes tuvieran diferente valores de 'color'.

Curiosidad de text-decoration

text-decoration es una propiedad que afecta no a la caja en sí, sino a las cajas (generadas o contenidas) dentro de ella. A diferencia de | border | (por ejemplo). Fíjate que los espacios en blanco sí se subrayan pero no el padding.
Así que en un caso, al declarar t-decoration a un elemento de bloque (li) todo lo que se declare diferente para sus descendientes de línea (a) se sumará a la decoración declarada en li. Si a li se aplica un tachado y a los enlaces un subrayado (es el valor por defecto), los enlaces tendrán una doble decoración: tachado y subrayado.

Anulando text-decoration

Después de este rollo teórico, volvamos a nuestro ejemplo. Pese a todo lo anterior, sí hay una única, que yo conozca, forma de anular la decoración. Primero haz :hover en el ejemplo de abajo:

:-)Mucho Mejor

Display: inline-block

Declarar tanto el span como al pseudo-elemento del enlace como elementos con display: inline-block anula el text-decoration declarado en su ancestro.

Otro ejemplo en codepen

Te dejo otro ejemplo que coloqué en codepen.io

Lecturas complementarias

Y para finalizar para quienes estén interesados en la propiedad css text-decoration un par de artículos del blog sobre ella:

  1. Text-decoration-color: The review. Ya disponible en colores y otros estilos
  2. Animando el Text-decoration con independencia de los estilos del elemento

Disclaimer

Si leíste con atención lo que dice la especificación sobre text-decotation (que no se hereda) y el título de este artículo, habrás observado la contradicción. Me tomé una pequeña licencia en el uso de ese "heredado".

Artículo publicado originalmente en septiembre de 2012. Revisado y actualizado en Marzo de 2015

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso