text-underline-position
Baseline 广泛可用 *
text-underline-position CSS 属性指定了使用 text-decoration 属性的 underline 值设置的下划线的位置。
试一试
text-underline-position: auto;
text-underline-position: under;
<section id="default-example">
<p>
<span class="transition-all" id="example-element"
>C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub></span
>
is the chemical formula for caffeine.
</p>
</section>
p {
font: 1.5em sans-serif;
}
#example-element {
text-decoration-line: underline;
}
语法
css
/* 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: revert;
text-underline-position: revert-layer;
text-underline-position: unset;
值
正式定义
正式语法
text-underline-position =
auto |
[ from-font | under ] || [ left | right ]
示例
一个基本示例
我们创建了两个示例文本段落。
html
<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>
我们的 CSS 如下所示：
css
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;
}
在此示例中，我们将两个段落都设置为粗下划线。在水平文本中，我们使用 text-underline-position: under; 将下划线置于所有下行字母下方。
在设置了垂直 writing-mode 的文本中，我们可以使用 left 或 right 值，根据需要使下划线出现在文本的左侧或右侧。
实时示例如下：
全局设置 text-underline-position
由于 text-underline-position 属性是继承的，并且不会被 text-decoration 简写属性重置，因此在全局级别设置其值可能是合适的。例如，under 值可能适用于包含大量下标的化学和数学公式的文档。
css
:root {
text-underline-position: under;
}
规范
| 规范 |
|---|
| CSS 文本装饰模块级别 3 # text-underline-position 属性 |
浏览器兼容性
加载中…
另见
text-decoration属性是设置大多数文本装饰属性的简写，包括text-decoration-line、text-decoration-color和text-decoration-style。但是，它不设置text-underline-position。