text-underline-position
CSS
property specifies the position of the underline which is set using the
text-decoration
property's
underline
值。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
/* 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;
auto
from-font
auto
was set, with the browser choosing an appropriate position.
under
Forces the line to be set below the alphabetic baseline, at a position where it won't cross any descenders. This is useful for ensuring legibility with chemical and mathematical formulas, which make a large use of subscripts.
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
|
|---|---|
| 适用于 | 所有元素 |
| 继承 | yes |
| 计算值 | 如指定 |
| 动画类型 | discrete |
auto | from-font | [ under || [ left | right ] ]
Let's take a couple of simple example paragraphs:
<p class="horizontal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac turpis vel laoreet. Nullam volutpat pharetra lorem, sit amet feugiat tortor volutpat quis. Nam eget sodales quam. Aliquam accumsan tellus ac erat posuere.</p> <p class="vertical">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac turpis vel laoreet. Nullam volutpat pharetra lorem, sit amet feugiat tortor volutpat quis. Nam eget sodales quam. Aliquam accumsan tellus ac erat posuere.</p>
Our CSS looks like this:
p {
font-size: 1.5rem;
text-transform: capitalize;
text-decoration: underline;
text-decoration-thickness: 2px;
}
.horizontal {
text-underline-position: under;
}
.vertical {
writing-mode: vertical-rl;
text-underline-position: left;
}
In this example we set both the paragraphs to have a thick underline. In the horizontal text we use
text-underline-position: under;
to put the underline below all the descenders.
In the text with a vertical
writing-mode
set, we can then use values of
left
or
right
to make the underline appear on the left or right of the text as required.
The live example looks like this:
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;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Text Decoration Module Level 3
The definition of 'text-underline-position' in that specification. |
候选推荐 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
text-underline-position
|
Chrome 完整支持 33 | Edge 完整支持 12 | Firefox 完整支持 74 | IE 完整支持 6 | Opera 完整支持 20 | Safari 完整支持 12.1 | WebView Android 完整支持 4.4.3 | Chrome Android 完整支持 33 | Firefox Android 不支持 No | Opera Android 完整支持 20 | Safari iOS 不支持 No | Samsung Internet Android 完整支持 2.0 |
above
and
below
Experimental
非标
|
Chrome 不支持 No | Edge 不支持 12 — 79 | Firefox 完整支持 74 | IE 完整支持 6 | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
auto-pos
Experimental
非标
|
Chrome 不支持 No | Edge 不支持 12 — 79 | Firefox 不支持 No | IE 完整支持 6 | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
from-font
|
Chrome 不支持 No | Edge 不支持 No | Firefox 完整支持 74 | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
left
and
right
|
Chrome 完整支持 71 | Edge 完整支持 79 | Firefox 完整支持 74 | IE 不支持 No | Opera 完整支持 58 | Safari 不支持 No | WebView Android 完整支持 71 | Chrome Android 完整支持 71 | Firefox Android 不支持 No | Opera Android 完整支持 50 | Safari iOS 不支持 No | Samsung Internet Android 完整支持 10.0 |
under
|
Chrome 完整支持 33 | Edge 完整支持 79 | Firefox 完整支持 74 | IE 不支持 No | Opera 完整支持 20 | Safari 完整支持 12.1 | WebView Android 完整支持 4.4.3 | Chrome Android 完整支持 33 | Firefox Android 不支持 No | Opera Android 完整支持 20 | Safari iOS 不支持 No | Samsung Internet Android 完整支持 2.0 |
完整支持
不支持
实验。期望将来行为有所改变。
非标。预期跨浏览器支持较差。
要求使用供应商前缀或不同名称。
text-decoration
property is a shorthand for setting most text-decoration properties, including
text-decoration-line
,
text-decoration-color
，和
text-decoration-style
. However, it does not set
text-underline-position
.