La text-decoration-thicknesspropiedad en CSS establece el grosor del trazo de la línea de decoración que se usa en el texto de un elemento. Las text-decoration-linenecesidades de valor a ser underline, line-througho overlinepara reflejar la propiedad espesor.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Sintaxis
auto | from-font | | Valores
auto: (Predeterminado) permite al navegador especificar un grosor apropiado para la línea de decoración del texto.from-font: Si la primera fuente disponible tiene métricas que especifican un grosor preferido, utiliza ese grosor; de lo contrario, se comporta como el valor automático.: Cualquier longitud válida con una unidad especifica el grosor de las líneas de decoración de texto como una longitud fija. Esto reemplaza cualquier información en la fuente y el navegador predeterminado.percentage: Especifica el grosor de las líneas de decoración de texto como un porcentaje de 1 em en la fuente del elemento.initial: La configuración predeterminada de la propiedad que es auto.inherit: Adopta el valor de grosor de decoración del padre.unset: Elimina el grosor actual del elemento.
Manifestación
Cambie el valor de text-decoration-thicknessen la siguiente demostración para ver cómo afecta la propiedad a la decoración del texto del elemento:
Es constante para los descendientes
Después de configurar una decoración para un elemento, todos sus hijos también tendrán esa decoración. Ahora imagina que queremos cambiar el grosor de la decoración para uno de los niños:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; )
p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )Esto no funciona porque el grosor de decoración especificado por los elementos ancestros no se puede anular. Para que esto funcione, se debe establecer una especificidad de decoración para el elemento en sí:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; ) p span ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.1em; /* It works! */ )Porcentaje y cascada
Para esta propiedad, una longitud se heredará como un valor fijo y no se escalará con la fuente. Por otro lado, un porcentaje heredará como un valor relativo y, por lo tanto, escalará con los cambios en la fuente a medida que hereda.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )La siguiente demostración muestra la comparación entre usar em y valores porcentuales en el caso de la herencia y, como puede ver, en el lado izquierdo (en el que estamos usando em) el valor heredado es una longitud fija. Eso significa que no se escala con el cambio en la fuente. En el lado derecho, sin embargo, el texto hereda un valor relativo (en este caso el 20%); por lo tanto, el grosor se escala con el cambio de fuente.
Si bien el borrador de trabajo actual de la especificación hace referencia a valores porcentuales para text-decoration-thickness, el soporte real está actualmente limitado a Firefox.
Utilizando con text-decoration
El borrador de trabajo actual de la especificación de Nivel 4 del Módulo de Decoración de Texto CSS se incluye text-decoration-thicknesscomo valor en la text-decorationpropiedad abreviada.
.link ( text-decoration: underline solid green 1px; )
/* The longhand equivalent */ .link ( text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: green, text-decoration-thickness: 1px; )Si text-decorationbien está bien admitido, la compatibilidad con la inclusión de text-decoration-thicknessestá actualmente limitada a Firefox.
Soporte de navegador
| Característica | ES DECIR | Borde | Firefox | Cromo | Safari | Ópera |
|---|---|---|---|---|---|---|
| Propiedad | No | No | 70 | No | 12,1 | No |
| Porcentajes | No | No | 76 | No | No | No |
| Taquigrafía | No | No | 70 | No | No | No |
| Característica | Android Chrome | Android Firefox | Navegador de Android | Safari de iOS | mini Opera |
|---|---|---|---|---|---|
| Propiedad | No | No | No | 12,2 | No |
| Porcentajes | No | No | No | No | No |
| Taquigrafía | No | No | No | No | No |
Notas
- La propiedad solía llamarse
text-decoration-width, pero se actualizó en el borrador de trabajo de 2019 de la especificación de nivel 4 del módulo de decoración de texto CSS. - El navegador debe utilizar un grosor mínimo de 1 píxel de dispositivo.