text-underline-position

**text-underline-position** CSS 属性指定使用 text-decoration 属性的 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;

值

auto

用户代理 使用其自身的算法将线放置在字母基线上或其下方。

from-font

如果字体文件包含有关首选位置的信息，则使用该值。如果字体文件不包含此信息，则像设置 auto 一样，由浏览器选择合适的位置。

under

强制将线设置在字母基线下方，在不会与任何下降字母重叠的位置。这对于确保化学和数学公式的可读性很有用，这些公式大量使用下标。

left

在垂直书写模式中，此关键字强制将线放置在文本的左侧。在水平书写模式中，它是 auto 的同义词。

在垂直书写模式中，此关键字强制将线放置在文本的右侧。在水平书写模式中，它是 auto 的同义词。

正式定义

初始值auto
应用于所有元素
继承是
计算值如指定
动画类型离散

正式语法

text-underline-position = 
  auto                           |
  [ 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-property

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅