text-underline-position property CSS Reference



Definition and Usage

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

This property inherits and is not reset by the text-decoration shorthand, allowing to easily set it globally for a given document:

:root { text-underline-position: under; } /* Better default for document with a lot of chemical formulas */
  • Initial auto
  • Applies to all elements
  • Inherited yes
  • Media visual
  • Computed Value as specified
  • Animatable no
  • Canonical order order of appearance in the formal grammar of the values

Syntax

Formal syntax: auto | [ under || [ left | right ] ]
text-underline-position: auto
text-underline-position: under
text-underline-position: left
text-underline-position: right
text-underline-position: under left
text-underline-position: right under
text-underline-position: inherit

Values

auto
This keyword allows the browser to use an algorithm to choose between under and alphabetic.
under
This keyword forces the line to be set below the alphabetic baseline, at a position where it won't cross any descender. This is useful to prevent chemical or mathematical formulas, which make a large use of subscripts, to be illegible.
left
In vertical writing-modes, this keyword forces the line to be placed on the left of the characters. In horizontal writing-modes, it is a synonym of under.
right
In vertical writing-modes, this keyword forces the line to be placed on the right of the characters. In horizontal writing-modes, it is a synonym of under.
auto-pos
This keyword is a synonym of auto which must be used instead
above
This keyword forces the line to be above the text. When used with East-Asian text, using the auto keyword will lead to a similar effect.
below
This keyword forces the line to be under the text. When used with alphabetic text, using the auto keyword will lead to a similar effect.

Examples

No examples


Compatibility

Desktop browsers

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (auto)Not supportedNot supported6Not supportedNot supported
under, left, rightNot supportedNot supportedNot supportedNot supportedNot supported
above, below Not supportedNot supported5Not supportedNot supported
auto-pos Not supportedNot supported6Not supportedNot supported

Mobile browsers

FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic supportNot supportedNot supportedNot supportedNANot supportedNot supported

Relative articles