使用CSS样式实现这个hr元素 - 伪元素 [英] Achieving this hr element with CSS styling - pseudo elements
本文介绍了使用CSS样式实现这个hr元素 - 伪元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一些困难找到一个解决方案来为我的喜好样式的hr元素。
I'm having some difficulty finding a solution to style a hr element to my preference.
如果你看下面的小提琴你会看到hr元素
If you look at the following fiddle you will see the hr element has both :before and :after pseudos added to it.
http://jsfiddle.net/MattStrange/LGEjp/
到目前为止,这是我想要的,两边的两个圆都是正确的,但现在我想要要添加一个图像到正确的中心线,但是因为两个伪元素,我不知道如何添加一个背景图片到这个小时。
So far this is what i want, both circles on either side is correct but now i want to add an image to the exact center of the line, but because both pseudos are taken up i'm not sure how to add a background image to this hr.
<hr class="bolt">
hr {
border: 0 solid #eeedef;
border-top-width: 1px;
height: 0;
margin-top: 60px;
margin-bottom: 60px;
float: left;
clear: both;
display: block;
width: 100%;
position: relative;
}
hr:before, hr:after {
content: " ";
width: 5px;
height: 5px;
position: absolute;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 1px solid #e5e5e5;
background-color: #fff;
}
hr:before {
left: 0;
bottom: -3px;
}
hr:after {
bottom: -3px;
right: 0;
}
帮助非常感激。
干杯
推荐答案
您可以使用:
- 一个伪绘制2轮,第一轮绘制边框,
第二个是它的阴影。 - 另一个伪图像。
http: //codepen.io/gcyrillus/pen/dHaus
这篇关于使用CSS样式实现这个hr元素 - 伪元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文