你好,请问如何添加伪元素从左到右的渐变效果。 我正在尝试:
.divider p:after {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 25%;
z-index: -1;
border-top: 1px solid #666666;
}
HTML
<div class="divider">
<p><span>Featured</span></p>
</div><!-- end of divider -->
上面的代码画了一条清晰的线,但我想创建这样的东西:
我的整个代码是:
.divider {
color: #666666;
}
.divider p span {
margin:0;padding: 0 10px;
background: #FFFFFF;
display: inline-block;
}
.divider p {
padding-left: 20px;
position: relative;
z-index: 2;
}
.divider p:after {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 25%;
z-index: -1;
border-top: 1px solid #666666;
}
最佳答案
.box:before,
.box:after {
content: "";
position: absolute;
display: block;
left: -10px;
width: 1px;
height: 50%;
}
.box:before {
top: 0;
background: linear-gradient(to top, #333 0%, transparent 100%);
}
.box:after {
bottom: 0;
background: linear-gradient(to bottom, #333 0%, transparent 100%);
}
关于css - 如何添加伪元素渐变效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28255361/