[解決済み] カーブした文字に下線を引くにはどうしたらいいですか？

質問

CSSとHTMLを使って、曲線のあるテキストアンダーラインを作ろうとしています。特に曲線は、与えられたデザイン概要で「swoosh」と呼ばれ、最初と最後の文字に満たない必要があります（例えば、「help you」という下線を引くには、「e」から始まって「o」で終わりますが、この部分は簡単だと思います。また、スウッシュは均等ではありません。

以下はその例です。

私はCSSが得意ではありませんが、この場合、CSSとHTMLに制約されることは分かっています。

今のところ、こんなのしか思いつきません。

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

こんな感じです（フォントは気にしないでください）: :(

どなたか、ご指摘はありませんか？前にやったことある？

どのように解決するのですか？

を使用することができます。 :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>