The text-underline-position
CSS property specifies the position of the underline which is set using the text-decoration
property's underline
value.
/* Single keyword */ text-underline-position: auto; text-underline-position: under; text-underline-position: left; text-underline-position: right; /* Multiple keywords */ 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 |
auto
under
left
under
.right
under
.auto-pos
auto
, which should be used instead.above
auto
keyword will lead to a similar effect.below
auto
keyword will lead to a similar effect.auto | [ under || [ left | right ] ]
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; }
Specification | Status | Comment |
---|---|---|
CSS Text Decoration Module Level 3 The definition of 'text-underline-position' in that specification. | Candidate Recommendation | Initial definition |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 33 | 12 | No | 6 | No | No |
under |
33 | ? | No | No | No | No |
left and right
|
No
|
? | No | No | No | No |
above and below
|
No | ? | No | 5 | No | No |
auto-pos
|
No | ? | No | 6 | No | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | No | No | Yes | No | No | No | No |
under |
? | ? | ? | ? | ? | ? | ? |
left and right
|
? | ? | ? | ? | ? | ? | No |
above and below
|
? | ? | ? | ? | ? | ? | No |
auto-pos
|
? | ? | ? | ? | ? | ? | No |
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-position
.
© 2005–2018 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