text-underline-offset
The text-underline-offset CSS property shifts underlines on text from the initial position by a given distance. The initial position is affected by the text-underline-position property.
Overview
The text-underline-offset CSS property shifts underlines on text from the initial position by a given distance. The initial position is affected by the text-underline-position property.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 87 | 87 | 70 | 12.1 | 87 | 12.2 | |
auto | 87 | 87 | 70 | 12.1 | 87 | 12.2 |
percentage percentage values | 87 | 87 | 74 | 18.2 | 87 | 18.2 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
a {
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 2px;
}
a:hover {
text-underline-offset: 2px;
}Live demo
Use cases
Using text-underline-offset
The text-underline-offset CSS property shifts underlines on text from the initial position by a given distance. The initial position is affected by the text-underline-position property.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features