The text-decoration-line property sets which decoration lines appear on text—underline, overline, line-through, or none. It is the line longhand of the text-decoration shorthand.
Prefer this longhand when you only want to toggle the line and keep text-decoration-style, text-decoration-color, and text-decoration-thickness unchanged.
Baseline widely available for the common line keywords. Not deprecated as a property.
Do not use text-decoration-line: blink. It is deprecated, often ignored, and inaccessible.
spelling-error and grammar-error use the browser’s native error styling and are newer (Chrome/Edge 121+, Firefox 137+, Safari 26.2+).
text-decoration-line: none | underline || overline || line-through | initial | inherit;Combine line keywords with spaces (for example underline overline). blink, spelling-error, and grammar-error exist but are special cases—see the callouts above.
text-decoration-linePick the line keyword(s) you need. Add style or color only with the other longhands.
underline, overline, line-through, or none.text-decoration-style and text-decoration-color.| Goal | Typical value |
|---|---|
| Link underline | underline |
| Remove underline | none |
| Deleted / struck text | line-through |
| Both above and below | underline overline |
Same sentence. Change only text-decoration-line.
Each snippet focuses on text-decoration-line. Use Try It Yourself for a live editor.
Draw a solid underline with the line longhand.
<style>
p {
text-decoration-line: underline;
}
</style>
<p>Sample decoration line</p>underline places a decoration under the glyphs.solid and color stays currentColor by default.Turn off the default underline without touching other decoration settings.
<style>
a {
text-decoration-line: none;
}
</style>
<a href="#">Plain link</a>a elements.none is the initial value and removes the decoration.underline on :hover / :focus-visible.Space-separate keywords to draw more than one line.
<style>
p {
text-decoration-line: underline overline;
}
</style>
<p>Sample decoration line</p>underline and overline are both allowed together.overline underline draws the same pair.line-through in the same list.If a decoration looks wrong, one of these is usually why.
A parent underline still paints through a child. text-decoration-line: none on the child does not remove it; the child can only add another line.
Setting text-decoration: underline on hover can wipe a custom color or thickness. Toggle with text-decoration-line instead.
blinkThe blink value is deprecated and should not be used in production CSS.
spelling-error / grammar-error are specialThey use native browser error styling and ignore many other decoration longhands. Support is still catching up—do not rely on them for critical UI yet.
The property’s inherited flag is no. Use the inherit keyword when a child must take the parent’s line value.
text-decoration-line is a browser CSS property for decoration lines. Node.js, Deno, and Bun do not apply it.
Common keywords: Chrome 57+, Firefox 36+, Safari 12.1+, Edge 79+. spelling-error / grammar-error: Chrome/Edge 121+, Firefox 137+, Safari 26.2+. Not supported as a longhand in Internet Explorer.
Bottom line: Safe for none, underline, overline, and line-through in modern browsers. Treat spelling/grammar values as progressive enhancement.
none, underline, overline, line-through.none. Not inherited.none does not cancel a parent decoration.One line: use text-decoration-line to draw or clear lines without resetting style, color, or thickness.
Learn solid, wavy, dashed, and dotted decoration styles.
8 people found this page helpful