Playground de text-decoration en CSS

Explora text-decoration con controles para combinar underline, overline, line-through, estilos de trazo, color y grosor sobre texto real.

BaselineLab permite comparar text-decoration con texto real, cambiando linea, estilo, color y grosor sin tocar el contenido. Usa la salida abreviada o individual para copiar solo el CSS que necesitas.

HTML

<p class="text-decoration-sample">
  BaselineLab permite comparar text-decoration con texto real,
  cambiando linea, estilo, color y grosor sin tocar el contenido.
  Usa la salida abreviada o individual para copiar solo el CSS que necesitas.
</p>

Tailwind CSS

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

<p class="max-w-2xl text-2xl font-bold leading-normal underline decoration-wavy decoration-[#0ea5e9] decoration-4">
  BaselineLab permite comparar text-decoration con texto real,
  cambiando linea, estilo, color y grosor sin tocar el contenido.
  Usa la salida abreviada o individual para copiar solo el CSS que necesitas.
</p>

CSS

.text-decoration-sample {
  max-inline-size: 38rem;
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.45;
  text-decoration: underline wavy #0ea5e9 4px;
}