text-decoration-line

text-decoration-line chooses which decorative lines to draw. Other longhands choose their style, color, and thickness.

Draw one line or combine lines

Underline and overline can be combined in one declaration. None is an alternative to a line list, not another line to combine with it.

<p class="under">Underline</p>
<p class="both">Underline and overline</p>

p {
  font-size: 1.5rem;
  text-decoration-color: #2563eb;
  text-decoration-thickness: 2px;
}
.under {
  text-decoration-line: underline;
}
.both {
  text-decoration-line: underline overline;
}

Show completion with text as well as a line

The completed item states its status in ordinary text. A screen reader or a reader who cannot perceive the line still receives the same information.

<ul>
  <li class="complete">
    <span class="task">Read the HTML lesson</span> — completed
  </li>
  <li>Try the CSS example — next</li>
</ul>

.complete .task {
  text-decoration-line: line-through;
}

Values and defaults

The initial value is none and the property is not inherited. Common line values are underline, overline, and line-through. Multiple compatible line values are space-separated. Blink is historical/deprecated and browsers need not blink; do not use it for attention cues. Newer spelling-error/grammar-error values have separate support and use browser-selected error painting rather than all ordinary decoration settings.

Common mistakes

Lines do not add semantic importance or deletion. Use del for removed text and strong for importance. Setting none on a child cannot erase a decoration established by its ancestor. A later text-decoration shorthand can reset the line.

Learn text-decoration, text-decoration-style, and text-decoration-color.

Sources and browser support

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