問題

Question

能否請您看看This Demo，讓我知道了如何樣式的<hr>看起來像下面的圖片：

我嘗試這樣做：

hr { 
    border-top: 3px solid red; 
    border-bottom: 3px solid blue; 
} 

但似乎我需要使用::after Pseudo-element。謝謝

Answer 1

可以使用:before做到這一點：僞元素：

hr:before { 
 
    content: ""; 
 
    width: 40px; 
 
    height: 3px; 
 
    background-color: #F8CC05; 
 
    position: absolute; 
 
    top: -4px; 
 
    left: -1px; 
 
} 
 
hr { 
 
    position: relative; 
 
    color: #DDDDDD; 
 
}

<hr />

Answer 2

就是這樣。

hr:before { 
     content: ""; 
     position: absolute; 
     top: 5px; 
     left: 8px; 
     border-bottom: 4px solid #F7C51E; 
     width: 40px; 
}