html - 我怎样才能使 flex 的文本下划线？

Question

我正在尝试使用 CSS 和 HTML 创建 flex 的文本下划线。这条曲线在我收到的设计简报中被称为“swoosh”，它需要低于第一个和最后一个字母(即下划线“help you”，它将从“e”开始并结束在“o”——我认为这部分很简单，将样式应用于没有第一个和最后一个字母的 span 标签)，并且必须有圆 Angular 的末端。旋风也不均匀。

这是一个例子:

我不是 super 热衷于 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>