CSS text-decoration playground

Explore text-decoration with controls for combining underline, overline, line-through, stroke styles, color, and thickness on real text.

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

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

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