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 value | auto |
---|---|
Applies to | all elements |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | order of appearance in the formal grammar of the values |
Syntax
Values
auto
- Allows the browser to use an algorithm to choose between
under
andalphabetic
. 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
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 33 | Yes | No | 6 | No | No |
under | 33 | ? | No | No | No | No |
left and right | No1 | ? | No | No | No | No |
above and below | No | ? | No | 5 | No | No |
auto-pos | No | ? | No | 6 | No | No |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | No | No | Yes | No | ? | No | No |
under | ? | ? | ? | ? | ? | ? | ? |
left and right | ? | ? | ? | ? | ? | ? | ? |
above and below | ? | ? | ? | ? | ? | ? | ? |
auto-pos | ? | ? | ? | ? | ? | ? | ? |
1. See bug 313888.
See also
- The
text-decoration
property is a shorthand for setting most text-decoration properties, includingtext-decoration-line
,text-decoration-color
, andtext-decoration-style
. However, it does not settext-underline-position
. - Microsoft non-standard values documentation.
Document Tags and Contributors
Tags:
Contributors to this page:
fscholz,
j.bruni,
mfluehr,
chrisdavidmills,
erikadoyle,
momdo,
Sebastianz,
HTMLValidator,
yisi,
kscarfone,
teoli,
Sheppy,
ethertank,
cohadar
Last updated by:
fscholz,