Text styling
text-underline-position
text-underline-position sets where an underline is drawn: at the bottom of the text so it clears descenders such as "g" and "p", or on the left or right side in vertical text.
Syntax
auto | from-font | [ under || [ left | right ] ]Preview
Presets
Drag the bottom-right corner to resize
Code
.box {
text-decoration: underline;
text-underline-position: under;
}Controls
text-underline-positionunder
Position in horizontal text
Side in vertical text
About
Values
auto: the browser decides. For Latin text it is usually just below the baseline, running into descenders such as "g" and "p" (the line breaks where they meet). This is the initial value.from-font: uses the underline position stored in the font, if any; otherwise the same asauto.under: draws the line at the bottom of the text, where it rarely crosses descenders. It helps with formulas full of subscripts and with Chinese or Japanese text.leftandright: choose the side of the text in vertical writing; they have no effect in horizontal text. They combine withunder, as inunder right. Written alone, the horizontal position isauto.
The spec's example recommends under right for Japanese: the bottom in horizontal text and the right side in vertical text.
Not set by text-decoration
This position is not part of the text-decoration shorthand, so it is written separately. It is inherited, so putting it on :root aligns underlines across the page. The preview on this page adds text-decoration: underline as a supporting declaration.