Text-underline-offset property
Last updated: 2026-09-13
text-underline-offset Text-underline-offset property
The text-underline-offset CSS property sets the distance between an underline and the text baseline, making the underline position more flexible and polished. By default the underline hugs the bottom of the text; an offset leaves a gap so the line does not collide with descenders such as g and y.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | Yes |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
text-underline-offset: auto | <length> | <percentage>;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | Keyword | Default offset |
<length> | <percentage> | Type | The underline offset distance as a length or percentage |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| text-underline-offset | ✓ v66 | ✓ v79 | ✓ v62 | ✓ v12.1 | ✓ v53 |
| Supported in all major browsers | |||||
Tip： text-underline-offset only affects the position of the underline; overlines and line-through are untouched.
Warning： It requires recent browser versions (Chrome 66+, Firefox 62+, Safari 12.1+); older browsers ignore the property.
❓ FAQ
QWhat is the difference between text-underline-offset and text-decoration-thickness?
Atext-underline-offset controls the distance between the underline and the text, while text-decoration-thickness controls how thick the underline is. They complement each other and can be combined for finer underline styling.
QWhat is the percentage value of text-underline-offset relative to?
AIt is relative to the element's font-size, where 100% equals the current font size. For example, with a 16px font size, text-underline-offset: 30% moves the line down about 4.8px. A value of 0 keeps the underline flush against the text bottom.
QHow do I create a gap between the underline and the text in CSS?
AOn top of text-decoration: underline, add text-underline-offset: 3px (or 0.2em) and the underline shifts downward as a whole. Pair it with text-decoration-thickness to also tune the weight and produce more polished link underlines.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
