Text-underline-position

The text-underline-position property sets the placement of the underline on links or on text with text-decoration: underline; applied.

.element {
  text-underline-position: under;
}

Values

These are the values specified in the W3C CSS Text Decoration Module Level 3 Candidate Recommendation:

auto: the default. The browser will decide between placing the underline at the text’s baseline or under it.
inherit: inherits the underline position of the parent.
under: places the underline under the text with extra space to prevent crossing descenders.
left: for vertical writing modes. This places the line to the left of the text.
right: for vertical writing modes. This places the line to the right of the text.

Microsoft uses a different set of values for Internet Explorer:

auto: the default. Places the underline below the text for all languages except Japanese (see the MSDN link in the “More Information” section below for details).
above: positions the underline above the text. Visually identical to text-decoration: overline;
below: positions the underline below the text. Note that this is different from under — it will not clear descenders.
auto-pos works the same as the MS implementation of auto.

Demo

At the time of this writing, text-underline-position is only partially supported by Chrome (33+ with experimental flags enabled) and Internet Explorer 6+. Chrome supports the auto, inherit, and under values from the W3C candidate recommendation, while IE supports its own alternate values.

This demo shows the under and below values in the browsers that support them.

text-decoration

More information

Browser support

Chrome	Safari	Firefox	Opera	IE	Android	iOS
33 *	None	None	None	6 †	None	None

* with -webkit prefix and experimental flags enabled in chrome://flags. left and right values not supported.
† with -ms prefix and IE-specific values.

Almanac on Aug 2, 2021