CSS中的波浪线下划线

Question

我能创建一个如下的波浪线吗：
但我只能得到一个实线边框：

.err {
  border-bottom:1px solid red;
  display: inline-block;
}

<div>A boy whose name was Peter was <div class="err">woking</div> down the street</div>

- Amelie P

---

试试这个：http://www.phpied.com/curly-underline/ - Anders Anderson

请查看此处的 border-image 属性 链接。 - Dpeif

截至2023年10月，浏览器通过text-decoration-style CSS属性原生支持此功能。 - undefined

Answer 1

没有背景图片：

.err {
  display: inline-block;
  position: relative;
}
.err:before {
  content: "~~~~~~~~~~~~";
  font-size: 0.6em;
  font-weight: 700;
  font-family: Times New Roman, Serif;
  color: red;
  width: 100%;
  position: absolute;
  top: 12px;
  left: -1px;
  overflow: hidden;
}

<div>A boy whose name was Peter was
  <div class="err">woking</div> down the street</div>

带背景图片：

.err {
    display: inline-block;
    position:relative;
    background: url(http://i.imgur.com/HlfA2is.gif) bottom repeat-x;
}

<div>A boy whose name was Peter was <div class="err">woking</div> down the street</div>

- The Pragmatick

---

这很棘手...哈哈。你应该使用一张背景图片来在每个浏览器上达到相同的效果。 - flks

对于较长的单词，这种方法可能不太适用，您需要将其溢出并使内容变得非常大。但我喜欢这个想法。 - Ruddy

这也取决于字体系列...如果用户在浏览器中默认设置了Georgia或Arial，那么您的解决方案将不再起作用。这需要进行排版修复。我认为这不是最好的想法。 - flks

我已将字体族更改为 Times New Roman，该字体在几乎所有计算机上都可用。 - The Pragmatick

对于这样一个小图像，数据方案可能更受欢迎。 data:image/gif;base64,R0lGODdhBAADAPEAANv///8AAP///wAAACwAAAAABAADAEACBZQjmIAFADs= - Myobis

Answer 2

以下是一种无需图像即可实现的示例。根据需要进行调整。

.err {
  border-bottom:2px dotted red;
  display: inline-block;
  position: relative;

}

.err:after {
  content: '';
  width: 100%;
  border-bottom:2px dotted red;
  position: absolute;
  font-size: 16px;
  top: 15px; /* Must be font-size minus one (16px - 1px) */
  left: -2px;
  display: block;
  height: 4px;

  
  }

<div>A boy whose name was Peter was <div class="err">woking</div> down the street</div>

- Sleek Geek

---

很顺畅，非常好。现在那才是超越传统思维的表现。加一分。 - Ruddy

@Ruddy 基本上是和这个方法一样的 https://dev59.com/zFnUa4cB1Zd3GeqPb5cb#6821456 - web-tiki

@web-tiki 哦，我明白了，这只是更整洁，因为它不是内联CSS，而是使用伪元素。仍然非常好看，我没有想到这种方法。 - Ruddy

为什么.err和.err:after规则都有底部边框？ - Jason S

我已经将它制作成不受字体大小影响的形式，如果有人感兴趣，请查看此链接：https://codepen.io/hyrumwhite/pen/MQLbjP - SethWhite

Answer 3

你可以使用CSS的text-decoration-style属性。

-webkit-text-decoration-style: wavy;
-moz-text-decoration-style: wavy;
text-decoration-style: wavy;

然而，这仅限于Firefox和Safari浏览器。您可能需要考虑使用图像替代。

- Richard Blyth

---

这现在在Chrome中可以工作了。 - SethWhite

@SethWhite - 你有在Chrome中的示例吗？我无法使其工作。 <span style="-webkit-text-decoration-style: wavy;-moz-text-decoration-style: wavy;text-decoration-style: wavy;" >错误</span> - Steve Childs

@SteveChilds 确定：https://codepen.io/hyrumwhite/pen/exOQLy 你只需要添加 text-decoration: underline，然后应用波浪样式。 - SethWhite

这个可以运行，但很遗憾有些丑陋。 - Pi Da

现在在所有主要浏览器中工作正常，可以在此处正确使用CanIUse“wavy”：https://caniuse.com/mdn-css_properties_text-decoration-style_wavy - d2vid

Answer 4

您可以在链接上使用:after伪元素，并设置一个波浪图像的repeat-x背景。您也可以使用border-imageCSS3属性，但这对于旧浏览器来说支持不完全。

- flks