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

Posted 2023-02-23

【中文标题】CSS中的波浪下划线[重复]

【英文标题】：A wavy underline in CSS [duplicate]

【发布时间】：2015-03-24 23:41:40

【问题描述】：

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

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

【问题讨论】：

试试这个：phpied.com/curly-underline

签出border-image属性here

【参考方案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;

  
  

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

【讨论】：

流畅，非常好。现在这就是跳出框框思考。 +1

@Ruddy 这与***.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;

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

【讨论】：

这很棘手……哈哈。您应该使用背景图片在每个浏览器上产生相同的效果。

对于较长的单词，这不会很好地工作，您必须在其上放置一个溢出并使内容变得非常大。但我喜欢这个主意。

这也取决于字体系列……如果用户在他的浏览器中默认设置了 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