<div class="title">
<span class="text">这是标题</span>
<span class="line"></span>
</div>
.title {
font-size: 36px;
color: #000000;
position: relative;
display: inline-block;
}
.text {
position: relative;
z-index: 999;
}
.line {
width: 100%;
height: 10px;
background: #109D71;
position: absolute;
bottom: 0;
z-index: 0;
left: 0;
}
伪元素实现
.like{
display: flex;
justify-content: space-between;
position: relative;
}
.like h4::before{
content: '';
background: linear-gradient(transparent, var(--bgcolor));
position: absolute;
bottom: 0;
left: 0;
width: 66px;
height: 10px;
}
这个世界上根本没有三观一致的人。
