Our volunteers haven't translated this article into عربي yet. Join us and help get the job done!
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
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 | 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
See also
- Text-decorations-related CSS properties:
text-decoration
,text-decoration-line
,text-decoration-style
,text-decoration-color
. - Microsoft non-standard values documentation.