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

发布时间：2020-12-14 23:00:26 所属栏目：资源来源：网络整理

导读：我正在尝试使用CSS和HTML来创建一个弯曲的文本下划线.特别是曲线在我给出的设计简介中被称为“swoosh”,它需要达不到第一个和最后一个字母(即强调“帮助你”,它将从“e”开始并结束在“o” 这部分我很容易,将样式应用于没有第一个和最后一个字母的span标签),

我正在尝试使用CSS和HTML来创建一个弯曲的文本下划线.特别是曲线在我给出的设计简介中被称为“swoosh”,它需要达不到第一个和最后一个字母(即强调“帮助你”,它将从“e”开始并结束在“o” – 这部分我很容易,将样式应用于没有第一个和最后一个字母的span标签),并且必须具有圆形末端.旋风也没有.

这是一个例子：

enter image description here

我对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;
    }

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

enter image description here

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

最佳答案

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


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!