Text
text-decoration
text-decoration is a shorthand for drawing underlines, overlines and strikethroughs. It takes the line kind, style, color and thickness in any order.
Syntax
<'text-decoration-line'> || <'text-decoration-style'>
|| <'text-decoration-color'> || <'text-decoration-thickness'>Preview
Presets
Drag the bottom-right corner to resize
Shorthand breakdown
text-decorationunderlinetext-decoration-line
wavytext-decoration-style
#e66465text-decoration-color
3pxtext-decoration-thickness
Code
.box {
text-decoration: underline wavy #e66465 3px;
}Controls
text-decoration-lineunderline
underline
overline
line-through
text-decoration-stylewavy
text-decoration-color#e66465
text-decoration-thickness3px
About
Four longhands
text-decoration-line: any combination ofunderline,overlineandline-through. The initial value isnone.text-decoration-style:solid,double,dotted,dashedorwavy.text-decoration-color: defaults tocurrentcolor, the text color.text-decoration-thickness: the initialautoleaves it to the browser, andfrom-fontuses the font’s own value. A%is relative to the font size (1em).
Parts you leave out of the shorthand reset to their initial values, so a { text-decoration: none } also resets the style and color.
Positioning the underline
Use text-underline-offset for the gap below the text and text-underline-position for where the underline goes. Neither is part of the shorthand, so rewriting text-decoration does not reset them.
Children can’t remove it
The line runs across all the text inside the element. Writing text-decoration: none on a child does not remove a line drawn by its parent. Children that are display: inline-block or taken out of the flow, for example with position: absolute, don’t get the parent’s line.