---
title: "Cómo solucionar el grosor de text-decoration muy grande, también en Gutenberg."
description: "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 con..."
url: https://dev.adammartin.es/micro-pildora/como-solucionar-el-grosor-de-text-decoration-muy-grande-tambien-en-gutenberg/
date: 2024-11-13
modified: 2026-08-04
author: "Adam Martin"
type: micro-pildora
lang: es
---

# Cómo solucionar el grosor de text-decoration muy grande, también en Gutenberg.

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:

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

```
$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.