text-underline-offset
Adjusts spacing between text and underline. tuo4px prevents the underline from overlapping characters, improving readability.
Class List
Pattern: tuo{value}{unit}
| Class | CSS | Description |
|---|---|---|
tuo1px | text-underline-offset: 1px | 1px spacing |
tuo2px | text-underline-offset: 2px | 2px spacing |
tuo4px | text-underline-offset: 4px | 4px spacing (recommended, good readability) |
tuo8px | text-underline-offset: 8px | 8px spacing (wide offset) |
tuo0-3rem | text-underline-offset: 0.3rem | 0.3rem spacing |
Visual Comparison
Default (no offset) —
Typography underline
2px — tuo2px
Typography underline
4px (recommended) — tuo4px
Typography underline
8px — tuo8px
Typography underline
Usage Examples
<!-- Readable underline link -->
<a href="#" class="tdu tuo4px c38BDF8">Readable underline link</a>
<!-- Underline + thickness + offset combination -->
<span class="tdu tdt2px tuo4px">Custom underline style</span>
<!-- Underline appears on hover + offset -->
<a href="#" class="tdn hover-tdu tuo4px c38BDF8 tall200msease">
Show underline on hover
</a>Tips & Notes
Readable underline
tuo4px provides appropriate spacing preventing overlap with descenders (g, p, y). Recommended for link styles.
text-decoration: underline required
Specifying offset without tdu has no effect. Always use with an active underline.