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.

Preguntar a la IA

Playground de text-decoration en CSS

Respuesta generada con openai/gpt-5.4-nano. La IA puede cometer errores. Revisa siempre el resultado.

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