text-underline-position
text-underline-position
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 |
Animation type | discrete |
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
andalphabetic
. 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 |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support (auto ) | 33.0 | (Yes) | 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 | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | No support | No support | (Yes) | 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
See also
- Text-decorations-related CSS properties:
text-decoration
,text-decoration-line
,text-decoration-style
,text-decoration-color
. - Microsoft non-standard values documentation.
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position