text-decoration
The text-decoration shorthand sets line, style, color, and thickness of text decorations like underlines.
Syntax
text-decoration: <line> <style> <color> <thickness>;
Examples
a { text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { text-decoration: none; }
.strike { text-decoration: line-through wavy red; }
Output
Renders links with an offset underline that disappears on hover and a wavy red strikethrough on .strike.
Notes
Keep underlines on links for accessibility; do not remove them without another affordance. Use text-underline-offset and text-decoration-thickness for refined styling.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 1.0 |
| firefox | 1.0 |
| safari | 1.0 |
| edge | 12 |