Is there any way to add weight to a text-underline in css?

Question

I have this code and I want to add weight to my curvy text-underline since it is too thin to actually have a visible impact. I've read about using border-bottom to add weight, but then I would not be able to make it curvy. Does anyone have any ideas on how to fix this?

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

Maybe using a background image? See the H.B. answer of [this](https://stackoverflow.com/questions/13840403/edit-line-thickness-of-css-underline-attibute) SO question. — Jeroen Heier, Jul 25 '18 at 03:49

score 1 · Answer 1 · answered Jul 25 '18 at 05:12

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>

Glad its works. Please, read [What should I do when someone answers my question?](https://stackoverflow.com/help/someone-answers). — caiovisk, Jul 27 '18 at 00:22

score 0 · Answer 2 · edited Nov 05 '18 at 21:27

0

Please try this:

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

edited Nov 05 '18 at 21:27

Zoe

27,060
21
118
148

answered Jul 25 '18 at 06:11

iPraxa Inc

548
3
6

2

While this code snippet may be the solution, [including an explanation](https://meta.stackexchange.com/questions/114762/explaining-entirely-%E2%80%8C%E2%80%8Bcode-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Narendra Jadhav Jul 25 '18 at 06:33

Is there any way to add weight to a text-underline in css?

2 Answers2