CSS text-decoration Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Container */
.demo {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  padding: 24px;
  max-width: 680px;
  margin: 40px auto;
  line-height: 1.6;
  color: #222;
}

h1 {
  font-size: 20px;
  margin-bottom: 12px;
}

.demo p {
  margin: 10px 0;
}

/* Default link */
.default a {
  color: #1e90ff;
  text-decoration: underline;
}

/* Simple underline (shorthand) */
.underline span {
  text-decoration: underline;
}

/* Overline using longhand */
.overline span {
  text-decoration-line: overline;
  text-decoration-color: #16a085;
}

/* Line-through */
.line-through span {
  text-decoration-line: line-through;
  color: #555;
}

/* No decoration */
.none span {
  text-decoration: none;
}

/* Double underline with color and thickness (shorthand + thickness) */
.double span {
  text-decoration: underline double #8e44ad;
  text-decoration-thickness: 4px;
}

/* Wavy underline */
.wavy span {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #e67e22;
}

/* Dotted and dashed examples */
.dotted span {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: #2ecc71;
}

.dashed span {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: #e74c3c;
}

/* Multiple lines and longhand properties */
.combined span {
  text-decoration-line: underline overline;
  text-decoration-color: #34495e;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
}</style></head><body><div class="demo">
  <h1>text-decoration examples</h1>
  <p class="default">Default link: <a href="#">Example link</a></p>
  <p class="underline">Underline: <span>Underlined text</span></p>
  <p class="overline">Overline: <span>Overlined text</span></p>
  <p class="line-through">Line-through: <span>Struck-through text</span></p>
  <p class="none">No decoration: <span>No decoration</span></p>
  <p class="double">Double, colored, thick: <span>Double underline</span></p>
  <p class="wavy">Wavy: <span>Wavy underline</span></p>
  <p class="dotted">Dotted: <span>Dotted underline</span></p>
  <p class="dashed">Dashed: <span>Dashed underline</span></p>
  <p class="combined">Combined lines: <span>Underline + overline</span></p>
</div></body></html>