text-underline-position

当 text-decoration属性的值设置为 underline 之后,可以用 text-underline-position 属性为其设置下划线的位置。
 
/* 只设置一个属性值 */
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;

/* 全局属性值 */
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: unset;

初始值auto
适用元素all elements
是否是继承属性yes
计算值as specified
Animation typediscrete

语法

属性值

auto
用户代理 会根据自己的算法来确认下划线是放在字母基线上还是 放在字母基线下方。
under
强制下划线的位置为字母基线的下方,在这个位置,下划线不会穿过任何字母,这样能确保数学方程式或者化学式的下标不会被下划线阻挡。
left
在垂直排版模式下,使下划线的位置在文字的左侧,在水平排版模式下,和 under 相同。
right
在垂直排版模式下,使下划线的位置在文字的右侧,在水平排版模式下,和 under 相同。
auto-pos This API has not been standardized.
auto的同义词 ,应使用 auto
above This API has not been standardized.
强制下划线放置于文本上面。当使用东亚文字时,此效果和使用 auto 相同。
below This API has not been standardized.
强制下划线放置于文本下面。当使用字母文字的时候,此效果和使用 auto 相同。

正式语法

auto | from-font | [ under || [ left | right ] ]

示例

由于 text-underline-position 属性可以继承,且无法用 text-decoration 简写属性重置,所以应当在全局级别设置其值。比如,under 值对一篇包括大量使用下标的数学或者化学公式的文档是非常有用的。

:root {
  text-underline-position: under;
}

规范

说明 状态 说明
CSS Text Decoration Module Level 3
text-underline-position
Candidate Recommendation 初始定义

浏览器兼容性

BCD tables only load in the browser

参阅