我很难找到一个解决方案来根据我的喜好设计一个hr元素.
如果您查看以下小提琴,您将看到hr元素同时具有：before和：之后添加了pseudos.
http://jsfiddle.net/MattStrange/LGEjp/
到目前为止这是我想要的,两边的两个圆都是正确的,但现在我想将一个图像添加到线的确切中心,但因为两个伪都被占用我不知道如何添加背景图像到这个小时.
<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轮,第一轮绘制边框,
第二是它的影子.
>另一个伪带来的图像.
