如何使用 CSS 创建特定文本下划线

Question

我可以使用 CSS 完成不同样式的“下划线”，但它是直的、波浪形的或点状的。

现在我遇到了一种我喜欢的不同风格，但我不知道如何实现这一点。页面上有点好玩。像这样的东西：

我尝试了CSS中的几种分类，但它们都是标准的。那么如果我看看这样的 SVG 样式，它可能是一个选择。

.underline--bacon {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/bacon.svg");
  background-position: 0 1.06em;
  background-size: 28px 9px;
  color: #9e4446;
}

但是我无法在一段文本上轻松使用它，因为它不是重复的图像。还有其他成功的方法吗？

Answer 1

这是一个使用问题中给出的图像与问题中给出的样式的示例。

图像在 x 轴上重复，但在 y 轴上不重复。文本行有一些额外的底部填充，以确保显示下划线。

<style>
  .underline--bacon {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/bacon.svg");
    background-position: 0 1.06em;
    background-position: 0 bottom;
    background-size: 28px 9px;
    color: #9e4446;
    background-repeat: repeat no-repeat;
    display: inline-block;
    padding-bottom: 9px;
  }
</style>
<div class="underline--bacon">a line of text</div>

当然这个方法只适用于一行文本。但我还没有从问题中理解“非重复”是什么意思，所以这个答案只涵盖了简单的情况。