Text Underline Offset
Controls offsets of an underline text decoration line.
Widely available
This feature is well established and works across many devices and browser versions.
| Class | Style |
|---|---|
tuo-0 | text-underline-offset: 0px; |
tuo-1 | text-underline-offset: 1px; |
tuo-2 | text-underline-offset: 2px; |
tuo-4 | text-underline-offset: 4px; |
tuo-8 | text-underline-offset: 8px; |
tuo-auto | text-underline-offset: auto; |
Auto
Initial value
The browser will determine the appropriate offset for the underline based on the font and styling.
Sphinx of black quartz, judge my vow.
<p class="fs-lg ta-c tc-slate td-u tuo-auto">Sphinx of black quartz, judge my vow.</p>0
The underline will be positioned directly under the text with no additional offset.
Sphinx of black quartz, judge my vow.
<p class="fs-lg ta-c tc-slate td-u tuo-0">Sphinx of black quartz, judge my vow.</p>1
The underline will be positioned 1px below the text.
Sphinx of black quartz, judge my vow.
<p class="fs-lg ta-c tc-slate td-u tuo-1">Sphinx of black quartz, judge my vow.</p>2
The underline will be positioned 2px below the text.
Sphinx of black quartz, judge my vow.
<p class="fs-lg ta-c tc-slate td-u tuo-2">Sphinx of black quartz, judge my vow.</p>4
The underline will be positioned 4px below the text.
Sphinx of black quartz, judge my vow.
<p class="fs-lg ta-c tc-slate td-u tuo-4">Sphinx of black quartz, judge my vow.</p>8
The underline will be positioned 8px below the text.
Sphinx of black quartz, judge my vow.
<p class="fs-lg ta-c tc-slate td-u tuo-8">Sphinx of black quartz, judge my vow.</p>Using utility variants
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
Targeting different viewports
You can combine responsive breakpoints like sm:tuo-*, md:tuo-*, lg:tuo-*, and xxl:tuo-* to allow targeting specific utilities in different viewports.
Targeting hover states
Alternatively, you can apply :hover by using h:tuo-* utility to override elements and change their values when hovering over them.