text-underline-position
Overview
The text-underline-position property adjusts the position of underlines applied using the underline; value of the text-decoration property. Although text-decoration is a shorthand for setting various text-decoration properties such as text-decoration-line, text-decoration-color, and text-decoration-style, it doesn't include text-underline-position.
This property is helpful for fine-tuning underlines, taking into account design requirements and particular use cases.
Examples and Usage
We'll showcase the text-underline-position property through two examples: one highlighting its use for underlining a chemical formula and another demonstrating left or right values combined with other properties in horizontal and vertical text.
Underlining a Chemical Formula
Let's underline the chemical formula of Theobromine without affecting the rest of the sentence.
<p>Theobromine - a key alkaloid found in cacao: <span class="formula">C<sub>7</sub>H<sub>8</sub>N<sub>4</sub>O<sub>2</sub></span>.</p>
/* Underline only the chemical formula and position it below the text */
.formula {
text-decoration: underline;
text-underline-position: under;
}
Now, only the formula is underlined, while the text-underline-position: under; value ensures that the underline doesn't cut through the subscript numbers.
Horizontal and Vertical Text with Left or Right Values
Next, we'll apply the text-underline-position property to horizontal and vertical text paragraphs, adjusting the underline position accordingly.
<p class="horizontal-text">Discover how to build for the web with Web Reference!</p>
<p class="vertical-text">Discover how to build for the web with Web Reference!</p>
/* Common styles for both paragraphs */
p {
font-size: 1.8rem;
color: #CD3333;
text-decoration: underline #FBBF24;
}
/* Position the underline below the text for the horizontal paragraph */
.horizontal-text {
text-underline-position: under;
}
/* Use a vertical writing mode and position the underline on the left for the vertical paragraph */
.vertical-text {
writing-mode: vertical-rl;
text-underline-position: left;
}
Here, the horizontal paragraph has an underline positioned below the text, while the vertical paragraph has a left-side underline thanks to the writing-mode: vertical-rl; and text-underline-position: left; properties.
Values
The text-underline-position property can accept the following values:
| Value | Description |
|---|---|
auto | The browser determines the underline position based on font metrics (default value). |
under | The underline is positioned below the text, without cutting any characters. |
left | Sets the position of the underline on the left side of vertically written text. |
right | Sets the position of the underline on the right side of vertically written text. |
from-font | Uses the position information from the font file if available, otherwise behaves as if set to auto. |
Non-standard and Experimental Values
The following non-standard and experimental values are also available:
| Value | Description |
|---|---|
auto-pos | Identical to auto, but auto is recommended for use. |
above | Positions the line above the text. With East-Asian text, the auto keyword creates a comparable effect. |
below | Positions the line below the text. With alphabetic text, the auto keyword creates a comparable effect. |
Associated Properties
text-decorationtext-decoration-linetext-decoration-colortext-decoration-styletext-decoration-thicknesswriting-mode
Tips and Tricks
For subscript text, setting
text-underline-positiontoundercan help avoid the underline cutting through the subscripts, improving readability.Be aware that the
text-underline-positionproperty is not reset by thetext-decorationshorthand property, so you might need to set it explicitly.Remember that non-standard and experimental values, such as
aboveandbelow, might not be supported consistently across browsers, so use them with caution.When working with vertical text, you can use the
leftandrightvalues to position the underline on the desired side of the text.Consider setting a global value for
text-underline-positionusing the:rootselector, particularly when working with documents containing numerous subscripts in chemical or mathematical formulas. For instance,:root { text-underline-position: under; }can be an appropriate choice for such documents."
Browser Compatibility
Older versions of Safari (9-12), require vendor prefixes for proper functioning. More specifics can be found in the useful resources section below.
| Browser | Chrome | Edge | Safari | Firefox | Opera | Internet Explorer |
|---|---|---|---|---|---|---|
| Support | Yes* | Yes* | Yes* | Yes* | Yes* | Yes* |
Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.
Useful Resources
Can I use: text-underline-position