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

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

我正在尝试使用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%;}

总结

以上是内存溢出为你收集整理的HTML – 如何使弯曲的文字下划线？全部内容，希望文章能够帮你解决HTML – 如何使弯曲的文字下划线？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1123153.html