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.

/* Keyword values */
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;

/* 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
Allows the browser to use an algorithm to choose between under and alphabetic.
under
Forces the line to be set below the alphabetic baseline, at a position where it won't cross any descender. 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

 

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support33 Yes No6 No No
under33 ? No No No No
left and right No1 ? No No No No
above and below No ? No5 No No
auto-pos No ? No6 No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic support No No Yes No ? No No
under ? ? ? ? ? ? ?
left and right ? ? ? ? ? ? ?
above and below ? ? ? ? ? ? ?
auto-pos ? ? ? ? ? ? ?

1. See bug 313888.

 

See also

Document Tags and Contributors

 Last updated by: fscholz,