Make the underline more curved-CodePudding

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 >text</span></h1>

CodePudding user response：

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 >text</span></h1>