Question

我有这段代码，我想增加弯曲的文本下划线的重量，因为它太细了而无法产生明显的影响。我已经读过有关使用下边框增加重量的信息，但是那样我将无法使其弯曲。有人对如何解决这个问题有任何想法吗？

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

Answer 1

There is no way set a text underline thickness without changing the font properties.

You can play with background-image and make a kind of wavy style.

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

<span class="underline-yellow">My decorated text</span>

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

有什么办法可以在CSS中为文本下划线增加权重？

2 个答案: