有什么方法可以为css中的文本下划线增加权重？答案

【问题标题】：Is there any way to add weight to a text-underline in css?有什么方法可以为css中的文本下划线增加权重？
【发布时间】：2018-07-25 03:35:47
【问题描述】：

我有这段代码，我想给我的弯曲文本下划线增加重量，因为它太薄而实际上没有明显的影响。我读过关于使用border-bottom 来增加重量，但是我不能让它弯曲。有人对如何解决这个问题有任何想法吗？

.underline-yellow{
  text-decoration: underline;
  text-decoration-color: #FFBE00;
  text-decoration-style: wavy;
  padding-bottom:2px;
  color: black;
}

【问题讨论】：

也许使用背景图片？见 H.B. this SO 问题的答案。

标签： css text-decorations

【解决方案1】：

如果不更改字体属性，则无法设置文本下划线粗细。

你可以和background-image一起玩，做出一种波浪的风格。

body {
  background: #ccc;
}
.underline-yellow{
  color: black;
    background-image: linear-gradient(45deg, transparent 65%, yellow 80%, transparent 90%), linear-gradient(135deg, transparent 5%, yellow 15%, transparent 25%), linear-gradient(135deg, transparent 45%, yellow 55%, transparent 65%), linear-gradient(45deg, transparent 25%, yellow 35%, transparent 50%);
    background-repeat: repeat-x;
    background-size: 20px 5px;
    background-position: 0 100%;
    padding-bottom: 3px;
 }

&lt;span class="underline-yellow"&gt;My decorated text&lt;/span&gt;

【讨论】：

很高兴它的作品。请阅读What should I do when someone answers my question?。

【解决方案2】：

请试试这个：

.underline-yellow{
    text-decoration: none;
    color: black;
    box-shadow: 0 1px 0 rgba(0,0,0,0), 0px 1px 0 #f7eb9a;
    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0), 0px 1px 0 #f7eb9a;
}

【讨论】：

虽然此代码 sn-p 可能是解决方案，但 including an explanation 确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。