使用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元素 - 僞元素

回答

相關問題