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