Cuando utilizamos text-decoration-thickness en CSS, debemos recordar que al aplicar text-decoration: underline, el grosor del subrayado se reinicia a su valor inicial (initial). Para garantizar consistencia, utiliza text-decoration: underline 1px en lugar de text-decoration: underline.
Evitar inconsistencias en Gutenberg
En proyectos basados en Gutenberg o estilos globales, es recomendable forzar el grosor y el desplazamiento del subrayado con reglas universales en CSS o SCSS. Esto ayuda a evitar olvidos o sobrescrituras accidentales. A continuación, te mostramos una solución global:
$text-decoration-thickness: 1px;
$text-underline-offset: 3px;
*,
*::before,
*::after {
text-decoration-thickness: $text-decoration-thickness !important;
text-underline-offset: $text-underline-offset !important;
}
[style*="text-decoration:underline"],
[style*="text-decoration: underline"] {
text-decoration-thickness: $text-decoration-thickness !important;
text-underline-offset: $text-underline-offset !important;
}
chrome_annotation[style] {
text-decoration: none !important;
border-bottom: none !important;
border-bottom-width: 0px !important;
}Conclusión
Utilizar estas configuraciones asegura que los subrayados sean consistentes en todos los elementos y evita errores comunes en el manejo de decoraciones de texto. Si trabajas con Gutenberg, estas reglas pueden integrarse directamente para prevenir sobrescrituras accidentales.