文本下划线位置 | text-underline-position
text-underline-position
该text-underline-position CSS属性指定当使用text-decoration属性的underline值时下划线的位置。
/* Keyword values */
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;
/* Global values */
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: unset;
| Initial value | auto |
|---|---|
| Applies to | all elements |
| Inherited | yes |
| Media | visual |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | order of appearance in the formal grammar of the values |
语法
可能值
auto——允许浏览器使用算法在under和alphabetic之间进行选择。
形式语法
auto | [ under || [ left | right ] ]
实例
由于该text-underline-position属性可被继承并且不被text-decoration简写属性重置，因此可以将其值设置为全局级别。例如，该under值可能适用于具有大量化学和数学公式的文档，这些文档大量使用了下标。
:root {
text-underline-position: under;
}
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Text Decoration Module Level 3The definition of 'text-underline-position' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support (auto) | 33.0 | (Yes) | No support | 61 | No support | No support |
| under | 33.0 | ? | No support | No support | No support | No support |
| left, right | No support2 | ? | No support | No support | No support | No support |
| above, below | No support | ? | No support | 51 | No support | No support |
| auto-pos | No support | ? | No support | 61 | No support | No support |
| Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| Basic support | No support | No support | (Yes) | No support | ? | No support | No support |
