text-underline-position

Summary

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 { /* Better default for document with a lot of chemical formulas */
  text-underline-position: under;
}

Initial value	`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

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

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.

Formal syntax

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

Specifications

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

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support (`auto`)	33.0	No support	6^[1]	No support	No support
`under`	33.0	No support	No support	No support	No support
`left`, `right`	No support^[2]	No support	No support	No support	No support
`above`, `below`	No support	No support	5^[1]	No support	No support
`auto-pos`	No support	No support	6^[1]	No support	No support

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	No support	No support	No support	?	No support	No support

[1] Internet Explorer implements different values, with somewhat different effects for this value. From IE 5 to IE 7, included, only a non-prefixed version existed. From IE 8 onwards, the prefix can be used.

[2] See Chrome Issue 313888