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;

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

Browser compatibility

[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

See also

• The text-decoration property is a shorthand for setting most text-decoration properties, including text-decoration-line, text-decoration-color, and text-decoration-style. However, it does not set text-underline-postion.
• Microsoft non-standard values documentation.