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
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序order of appearance in the formal grammar of the values

语法

属性值

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

正式语法

auto | [ 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 初始定义

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
text-underline-positionChrome Full support 33Edge Full support 12Firefox No support NoIE Full support 6Opera Full support 20Safari No support NoWebView Android Full support 4.4.3Chrome Android Full support 33Firefox Android No support NoOpera Android Full support 20Safari iOS No support NoSamsung Internet Android No support No
above and below
ExperimentalNon-standard
Chrome No support NoEdge Full support 12Firefox No support NoIE Full support 6Opera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
auto-pos
ExperimentalNon-standard
Chrome No support NoEdge Full support 12Firefox No support NoIE Full support 6Opera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
left and rightChrome Full support 71Edge No support NoFirefox No support NoIE No support NoOpera Full support 58Safari No support NoWebView Android Full support 71Chrome Android Full support 71Firefox Android No support NoOpera Android Full support 50Safari iOS No support NoSamsung Internet Android No support No
underChrome Full support 33Edge No support NoFirefox No support NoIE No support NoOpera Full support 20Safari No support NoWebView Android Full support 4.4.3Chrome Android Full support 33Firefox Android No support NoOpera Android Full support 20Safari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.

参阅