使用CSS样式实现此hr元素 - 伪元素

我在找到解决方案来将hr元素设置为我的首选项时遇到了一些困难。使用CSS样式实现此hr元素 - 伪元素

如果你看看下面的小提琴，你会看到hr元素同时具有：before和：在添加pseudos之后。

到目前为止，这是我想要的，两个圆两边是正确的，但现在我想将图像添加到该行的正中心，但因为两个假点采取了我是不知道如何添加背景图片到这个小时。

<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; 
}

帮助非常赞赏。

干杯

来源

2013-06-19 Shoebox

您可以使用：

一个伪画的2轮，第一轮被绘制边框，第二个是它的影子。
另一个伪引入图像。

http://codepen.io/gcyrillus/pen/dHaus

来源

2013-06-19 03:53:58

好极了！几乎正是我所追求的，是否有可能将hr元素设置为宽度为100％，并将“box-shadow：400px 0 0 -1px white，400px 0 0 0＃eeedef”设置为100％？ – Shoebox

非常多的盒子阴影圈总是在hr结束时结束。 – Shoebox

使用CSS样式实现此hr元素 - 伪元素

回答

相关问题