如何使弯曲的文本下划线？

Question

我正在尝试使用CSS和HTML创建弯曲的文本下划线。特别是在我给的设计简介中，该曲线被称为“ swoosh”，它需要少于首字母和最后一个字母（即，在“ help you”下划线，它将从“ e”开始并结束在“ o”处-我认为这部分很容易，将样式应用于span标签，而没有首字母和最后一个字母），并且必须具有圆角末端。耐克也不均匀。

下面是一个示例：

我对CSS并不是很感兴趣，但我知道在这种情况下我仅限于CSS和HTML-没有HTML5或使用JavaScript来完成它。

到目前为止，我只能设法解决这个问题：

    .swoosh1 {
      width: 500px; 
      height: 100px;  
      border: solid 5px #cb1829;
      border-color: #cb1829 transparent transparent transparent;
      border-radius: 50%/100px 100px 0 0;
    }

看起来像这样（不用担心字体）：:(

有人有指针吗？以前做过吗？

Answer 1

您可以使用:after伪元素来保留您的下划线：

.underlined {
  position: relative;
  margin-right: 1rem;
}
.underlined:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  height: 7px;
  width: 100%;
  border: solid 2px #cb1829;
  border-color: #cb1829 transparent transparent transparent;
  border-radius: 50%;
}
.small {
  font-size: 60%;
}
.big {
  font-size: 200%;
}

<span class="underlined">Test</span>
<span class="underlined small">Test</span>
<span class="underlined big">Test</span>

Answer 2

先使用:after，然后再使用border，radius和position

了解伪：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

.text:after{
    content: "";
    position: absolute;
    height: 15px;
    width: 70px;
    left: 5px;
    top: 37px;
    border-top: 2px solid red;
    border-radius: 50%;
}
.text{
 font-family: "Comic Sans MS", cursive, sans-serif;
color:red;
}

<p class="text">Your local</p>