HTML – 如何使弯曲的文字下划线？

我正在尝试使用CSS和HTML来创建一个弯曲的文本下划线.特别是曲线在我给出的设计简介中被称为“swoosh”,它需要达不到第一个和最后一个字母(即强调“帮助你”,它将从“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;
    }

看起来像这样(不要担心字体)::(

有没有人有任何指针？以前做过吗？

最佳答案

你可以使用：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%;
}

原文地址：https://www.jb51.cc/html/426286.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。