text-decoration

text-decoration sets line, style, color, and thickness for text decorations. It changes painting rather than the meaning of the text.

Combine a line, style, color, and thickness

The second paragraph combines underline and overline. Neither becomes a link just because it is underlined.

<p class="simple">Simple underline</p>
<p class="combined">Two wavy lines</p>

p {
  font-size: 1.5rem;
}
.simple {
  text-decoration: underline;
}
.combined {
  text-decoration: underline overline wavy #2563eb 2px;
}

Keep a real link recognizable

The link has an actual destination within this document. Underlining makes it distinguishable beyond its color; a separate outline supplies keyboard focus.

<p>Try the <a href="#details">practice details</a>.</p>
<section id="details">
  <h2>Practice details</h2>
  <p>This destination is inside the example.</p>
</section>

a {
  color: #1d4ed8;
  text-decoration: underline solid currentColor 2px;
  text-underline-offset: 0.2em;
}
a:focus-visible {
  outline: 3px solid #172554;
  outline-offset: 3px;
}

Defaults and resets

Omitted shorthand components reset: line none, style solid, color currentColor, thickness auto. The shorthand is not inherited. Thickness syntax has a separate support history from the older components. Text-underline-offset, text-underline-position, and text-decoration-skip-ink are outside this shorthand.

Common mistakes

Decorations propagate through inline descendant text even though the property is not inherited. Setting text-decoration:none on a child span cannot remove an underline painted by its ancestor; remove it at the element that creates it or change the formatting structure deliberately. Line-through alone does not communicate deletion or completion to every reader; use del for a real edit or explicit status text for a completed task.

Learn text-decoration-line, text-decoration-style, and text-underline-offset.

Sources and browser support

MDN: text-decoration describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.