CSS中的波浪下划线[重复]答案

【问题标题】：A wavy underline in CSS [duplicate]CSS中的波浪下划线[重复]
【发布时间】：2015-03-24 23:41:40
【问题描述】：

我可以像这样创建一个波浪下划线吗：
我只能得到一个实心边框：

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

&lt;div&gt;A boy whose name was Peter was &lt;div class="err"&gt;woking&lt;/div&gt; down the street&lt;/div&gt;

【问题讨论】：

试试这个：phpied.com/curly-underline
签出border-image属性here

标签： html css underline

【解决方案1】：

下面是一个示例，说明您可以在没有图像的情况下实现这一目标。根据需要进行调整。

.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;

  
  }

&lt;div&gt;A boy whose name was Peter was &lt;div class="err"&gt;woking&lt;/div&gt; down the street&lt;/div&gt;

【讨论】：

流畅，非常好。现在这就是跳出框框思考。 +1
@Ruddy 这与stackoverflow.com/a/6821456/1811992的方法基本相同
@web-tiki 啊，我认为它更整洁，因为它不是内联 CSS 并使用伪元素。还是很好看的，没想到这个方法。
为什么.err 和.err:after 规则都有下边框？
如果有人感兴趣，我已经把它做成了字体大小不可知论者：codepen.io/hyrumwhite/pen/MQLbjP

【解决方案2】：

无背景图片：

.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;
}

&lt;div&gt;A boy whose name was Peter was &lt;div class="err"&gt;woking&lt;/div&gt; down the street&lt;/div&gt;

【讨论】：

这很棘手……哈哈。您应该使用背景图片在每个浏览器上产生相同的效果。
对于较长的单词，这不会很好地工作，您必须在其上放置一个溢出并使内容变得非常大。但我喜欢这个主意。
这也取决于字体系列……如果用户在他的浏览器中默认设置了 Georgia 或 Arial，那么您的解决方案将不再有效。那需要修正错字。我认为这不是最好的主意。
我已将 font-family 更改为 Times New Roman，几乎在每台计算机上都可用。
对于这么小的图片，数据方案可能是首选 data:image/gif;base64,R0lGODdhBAADAPEAANv///8AAP///wAAACwAAAAABAADAEACBZQjmIAFADs=

【解决方案3】：

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

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

但是，this is limited to Firefox and Safari。您可能需要考虑改用图片。

【讨论】：

现在可以在 Chrome 中使用
@SethWhite - 你在 Chrome 中有一个这样的例子吗，因为我无法让它工作。错误
@SteveChilds sure: codepen.io/hyrumwhite/pen/exOQLy 你只需要添加 text-decoration: 下划线，然后应用波浪样式。
看来你现在也可以添加text-decoration-color: red了！
很棒的解决方案，适用于 Chrome：text-decoration: underline wavy 1em red;。您也必须与供应商一起使用它：-webkit 和 -moz

【解决方案4】：

您可以在链接上使用:after 伪元素并设置波形图像的repeat-x 背景。您也可以使用border-image CSS3 属性，但对于旧浏览器，这是not fully supported

【讨论】：