Text
text-underline-offset
text-underline-offset sets how far below the text an underline is drawn, for example to drop link underlines a little.
Syntax
auto | <length-percentage>Preview
Presets
Drag the bottom-right corner to resize
Code
.box {
text-decoration: underline #e66465 4px;
text-underline-offset: 12px;
}Controls
text-underline-offset12px
About
Measured from the baseline
Lengths are measured downward from the alphabetic baseline the letters sit on. Negative values move the line up into the text. The initial auto leaves it to the browser. % and em are relative to the font size, so the gap grows with the text.
Not part of text-decoration
This property is not part of the text-decoration shorthand, so the underline itself still comes from text-decoration: underline; the preview here adds it as a helper declaration. In turn, rewriting text-decoration does not reset this value.
It is inherited, so setting it on body lines up every link underline on the page at once. It has no effect on overlines or strikethroughs.