Widely available Supported across all major browsers. Safe to use in production.

text-underline-position

The text-underline-position CSS property specifies the position of the underline which is set using the text-decoration property's underline value.

Typography

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
text-underline-position
33
12
74
12.1
33
12.2
auto
33
79
74
12.1
33
12.2
from-font
87
87
74
12.1
87
12.2
left
71
79
74
18.2
71
18.2
right
71
79
74
18.2
71
18.2
under
33
79
74
12.1
33
12.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (9)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (9)

Syntax

CSS 
.clean-underline {
  text-decoration: underline;
  text-underline-position: under;
  text-underline-offset: 3px;
}

Live demo

Auto(default)

CSS Auto(default) demo.

PreviewFullscreen

Under(character. bottom)

CSS Under(character. bottom) demo.

PreviewFullscreen

under + offset

CSS Under + offset demo.

PreviewFullscreen

Use cases

  • Using text-underline-position

    The text-underline-position CSS property specifies the position of the underline which is set using the text-decoration property's underline value.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links