Make the underline more curved

Question

I have a problem. I want to edit a text with a tutor. However, I would like to make it more curved. My underline is just straight. Is there an option to make the underline more curved, like in the example pictures? So that it looks a bit more human.

.here {
  position: relative;
}

.here::after {
  content: " ";
  left: 0;
  right: 0;
  position: absolute;
  bottom: 1px;
  height: 25%;
  background-color: #9bffb0a6;
  z-index: 0;
  border-radius: 2px;
  color: black;
}

<h1>Hello this a <span class="here">text</span></h1>

Does this answer your question? [Draw a curve with css](https://stackoverflow.com/questions/20803489/draw-a-curve-with-css) — kennarddh, May 31 '22 at 18:59

score 4 · Accepted Answer · edited May 31 '22 at 18:56

You can section off the border color to be transparent on 3 of 4 sides and have the 4th be your actual color and create sort of a pseudo bend effect

.here {
  position: relative;
  font-size: 80px;
}

.here::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: -7px;
  height: 10px;
  width: 100%;
  z-index: -1;
  border: solid 8px #9bffb0;
  border-color: #9bffb0a6 transparent transparent transparent;
  border-radius: 100%;
}

<h1>Hello this a <span class="here">text</span></h1>

Make the underline more curved

1 Answers1