如何添加伪元素渐变效果 [英] how to add a pseudo-element gradient effect
本文介绍了如何添加伪元素渐变效果的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
你好,我怎么能从左到右添加一个伪元素渐变效果.我正在尝试:
Hello how could i add to a pseudo-element gradient effect from left to right. i'm trying:
.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 -->
上面的代码画了一条清晰的线,但是我想创建这样的东西:
above code draws a sharp line,but i would like create something like this:
我的整个代码是:
.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%);
}
这篇关于如何添加伪元素渐变效果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文