如何解决如何在 CSS 中制作边框底部重叠文本?
我试图在一个单词上加粗下划线并与它上面的单词重叠,有点像负填充下划线。就像 this image
中“maygha”这个词的下划线一样这就是我现在所拥有的:
span {
border-bottom: 16px solid #a2c1f5;
}
<h1> hi there! <br> i'm <span> maygha!<span></h1>
解决方法
简单地,像这样使用::after
h1 {
font-size: 2rem;
}
h1 span {
display: inline-block;
position: relative;
}
h1 span::after {
content: '';
position: absolute;
bottom: 20%;
left: 0;
height: .5rem;
width: 100%;
background: red;
z-index: -1;
}
<h1> hi there! <br> i'm <span> maygha!<span></h1>
我会将 inline-block
的 span
与使用 em
s
span {
border-bottom: 10px solid rgba(0,255,.5);
display: inline-block;
height: 0.7em;
}
<h1>
My <span>text</span>
</h1>
一种方法是通过 box-shadow
,如以下代码段所示。缺点是您需要为阴影的颜色提供一个 alpha 分量。
span {
box-shadow: inset 0 -10px 0 rgba(0,.5)
}
<h1> hi there! <br> i'm <span> maygha!<span></h1>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。