【问题标题】:A wavy underline in CSS [duplicate]CSS中的波浪下划线[重复]
【发布时间】: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>

【问题讨论】:

标签: 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;

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

【讨论】:

  • 流畅,非常好。现在这就是跳出框框思考。 +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

【讨论】:

    猜你喜欢
    • 2016-01-31
    • 2017-09-13
    • 2020-09-02
    • 2017-03-25
    • 1970-01-01
    • 2018-01-16
    • 1970-01-01
    • 2017-01-18
    • 2017-05-02
    相关资源
    最近更新 更多