在CSS中使用文本装饰自定义下划线

他们说 等待的人会得到好东西 ，这在网络上的文本修饰方面证明是非常正确的。 CSS 文本装饰模块 Level 3 定义了一些很棒的新方法来装饰 Web 上的文本，并且浏览器终于开始对它们提供良好的支持。使用 border-bottom 代替适当的文本下划线以获得不同的下划线颜色的时代可能最终会过去。

结果可能会有所不同： 支持仍然有限，因此本文中的示例可能无法正确显示，具体取决于您使用的浏览器。

文字装饰

text-decoration 属性过去只是关于 none、underline、overline 和 line 的值之间的选择。通过，但随着新的推荐成为新的text-decoration-color、text-decoration-style和text-decoration-line[的简写X325X] 属性。例如，这是一个彩色双下划线：

.fancy {
  -webkit-text-decoration: hotpink double underline;
  text-decoration: hotpink double underline;
}

花式下划线

文字装饰颜色

就像你想象的那样工作。终于有办法改变文字装饰颜色了！

文字装饰风格

text-decoration-style用于定义文本装饰的类型，新推荐带来了两个新值：double和wavy：

.wavy {
  text-decoration: underline;
  -webkit-text-decoration-color: salmon;
  text-decoration-color: salmon;
  -webkit-text-decoration-style: wavy;
  text-decoration-style: wavy;
}

波浪装饰

文字装饰线

text-decoration-line 接受 underline、overline、line-through 和 blink 的值（闪烁是但是已弃用）：

.strike {
  -webkit-text-decoration-color: red;
  text-decoration-color: red;
  -webkit-text-decoration-line: line-through;
  text-decoration-line: line-through;
}

打这个

文本装饰跳过

使用 text-decoration-skip 我们可以避免在其应用的部分元素上进行装饰步骤。可能的值为 objects、spaces、ink、edges 和 box-decoration。

ink：最后，一种防止文本装饰与字形下降重叠的方法：

.ink {
  -webkit-text-decoration: darkturquoise solid underline;
  text-decoration: darkturquoise solid underline;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip: ink;
}

河马

objects：文本修饰会跳过显示为 inline-block 的元素。它也是初始值：

<p class="super">
  Getting <span style="display: inline-block;">Very</span> Fancy
</p>

.super {
  -webkit-text-decoration: peru solid overline;
  text-decoration: peru solid overline;
  -webkit-text-decoration-skip: objects;
  text-decoration-skip: objects;
}

得到非常花哨

浏览器还不能很好地支持其余值：

spaces：装饰跳过空格和标点符号。
edges：当两个带有文本装饰的元素彼此相邻时创建一个间隙。
box-decoration：装饰跳过任何继承的边距、内边距或边框。

文本下划线位置

使用 text-underline-position 我们还有另一种方法来控制文本装饰相对于字形的定位。可能的值为 auto、under、left 和 right。

使用auto，初始值，浏览器通常会将装饰放置在靠近文本基线的位置：

.auto {
  -webkit-text-decoration: slateblue solid underline;
  text-decoration: slateblue solid underline;
  -webkit-text-underline-position: auto;
  text-underline-position: auto;
}

河马

......现在请注意，在下下，装饰是如何放置在文本降序之后的：

.under {
  -webkit-text-decoration: slateblue solid underline;
  text-decoration: slateblue solid underline;
  -webkit-text-underline-position: under;
  text-underline-position: under;
}

河马

text-underline-position 的 left 和 right 值用于控制垂直书写模式下的文本修饰。

现在继续用一些花哨的文字装饰给我们留下深刻印象！

浏览器支持： 截至 2020 年，Can I Use text-decoration? 显示全球 94% of 浏览器至少部分支持该属性。