使下划线更弯曲

Question

我有问题。我想和导师一起编辑课文。但是，我想让它更弯曲。我的下划线是直的。是否可以选择使下划线更弯曲，就像示例图片中那样？让它看起来更人性化。

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

Answer 1

您可以将边框颜色分割成 4 个边中的 3 个是透明的，并让第 4 个是您的实际颜色并创建一种伪弯曲效果

.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

html

css