text-underline-offset
Baseline 广泛可用 *
text-underline-offset 是一个 CSS 属性，用于设置下划线文本装饰线（使用 text-decoration 应用）与其原始位置的偏移距离。
试一试
text-underline-offset: auto;
text-underline-offset: 8px;
text-underline-offset: -0.5rem;
<section id="default-example">
<p id="example-element">And after all we are only ordinary</p>
</section>
p {
font: 1.5em sans-serif;
text-decoration-line: underline;
text-decoration-color: red;
}
text-underline-offset 不是 text-decoration 简写的一部分。虽然一个元素可以有多个 text-decoration 线，但 text-underline-offset 只影响下划线，而不影响其他可能的线条装饰选项，例如 overline 或 line-through。
语法
css
/* Single keyword */
text-underline-offset: auto;
/* length */
text-underline-offset: 0.1em;
text-underline-offset: 3px;
/* percentage */
text-underline-offset: 20%;
/* Global values */
text-underline-offset: inherit;
text-underline-offset: initial;
text-underline-offset: revert;
text-underline-offset: revert-layer;
text-underline-offset: unset;
text-underline-offset 属性指定为以下列表中的单个值。
值
auto-
浏览器为下划线选择适当的偏移量。
<length>-
将下划线偏移量指定为
<length>，覆盖字体文件建议和浏览器默认值。建议使用em单位，以便偏移量随字体大小缩放。 <percentage>-
将下划线偏移量指定为元素字体中 1 em 的
<percentage>。百分比作为相对值继承，因此会随字体的变化而缩放。对于此属性的给定应用，偏移量在应用下划线的整个框中是恒定的，即使存在具有不同字体大小或垂直对齐的子元素。
正式定义
| 初始值 | auto |
|---|---|
| 应用于 | 所有元素。也适用于 ::first-letter 和 ::first-line。 |
| 继承性 | 是 |
| 百分比 | 参考元素本身的字体大小 |
| 计算值 | 同指定值 |
| 动画类型 | 按计算值类型 |
正式语法
text-underline-offset =
auto |
<length-percentage>
<length-percentage> =
<length> |
<percentage>
示例
text-underline-offset 的演示
html
<p class="one-line">Here's some text with an offset wavy red underline!</p>
<br />
<p class="two-lines">
This text has lines both above and below it. Only the bottom one is offset.
</p>
css
p {
text-decoration: underline wavy red;
text-underline-offset: 1em;
}
.two-lines {
text-decoration-color: purple;
text-decoration-line: underline overline;
}
规范
| 规范 |
|---|
| CSS 文本装饰模块第 4 级 # 下划线偏移 |
浏览器兼容性
加载中…