この記事はまだボランティアによって 日本語 に翻訳されていません。ぜひ MDN に参加して翻訳を手伝ってください！
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
underandalphabetic. 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
autowhich must be used instead above- This keyword forces the line to be above the text. When used with East-Asian text, using the
autokeyword will lead to a similar effect. below- This keyword forces the line to be under the text. When used with alphabetic text, using the
autokeyword 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.