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

/* Single keyword */
text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;

/* Multiple keywords */
text-underline-position: under left;
text-underline-position: right under;

/* Global values */
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: unset;

Initial valueauto
Applies toall elements
Inheritedyes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderorder of appearance in the formal grammar of the values

Syntax

Values

auto
The user agent will use its own algorithm to place the line at or under the alphabetic baseline.
under
Forces the line to be set below the alphabetic baseline, at a position where it won't cross any descenders. This is useful for ensuring legibility with chemical and mathematical formulas, which make a large use of subscripts.
left
In vertical writing-modes, this keyword forces the line to be placed on the left side of the text. 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 side of the text. In horizontal writing-modes, it is a synonym of under.
auto-pos
A synonym of auto, which should be used instead.
above
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
Forces the line to be below the text. When used with alphabetic text, using the auto keyword will lead to a similar effect.

Formal syntax

auto | [ under || [ left | right ] ]

Examples

Because the text-underline-position property inherits and is not reset by the text-decoration shorthand property, it may be appropriate to set its value at a global level. For example, the under value may be appropriate for a document with lots of chemical and mathematical formulas, which make a large use of subscripts.

:root {
  text-underline-position: under;
}

Specifications

Specification Status Comment
CSS Text Decoration Module Level 3
The definition of 'text-underline-position' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 33Edge Full support 12Firefox No support NoIE Full support 6Opera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
underChrome Full support 33Edge ? Firefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
left and rightChrome No support No
Notes
No support No
Notes
Notes See bug 313888.
Edge ? Firefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android No support No
above and below
ExperimentalNon-standard
Chrome No support NoEdge ? Firefox No support NoIE Full support 5Opera No support NoSafari No support NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android No support No
auto-pos
ExperimentalNon-standard
Chrome No support NoEdge ? Firefox No support NoIE Full support 6Opera No support NoSafari No support NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.

See also

Document Tags and Contributors

Last updated by: mfluehr,