選擇器之前的CSS不起作用

Question

我正在創建一個懸停效果

所以我有簡單的文本首頁，背景顏色是紫色

我想在文本前添加邊框，但效果沒有顯示

我正在使用::before

以下是我的代碼

 * { margin: 0; padding: 0; } .container::before { border: 2px solid black; } .container { background-color: purple; color: white; font-size: 50px; width: 300px; position: relative; top: 50px; left: 80px; } 

 <div class="container">HOME</div> 

Answer 1

除非指定應如何顯示，否則不會呈現::before psuedo-element。

 * { margin: 0; padding: 0; } .container::before { border: 2px solid black; display: block; content: "..."; } .container { background-color: purple; color: white; font-size: 50px; width: 300px; position: relative; top: 50px; left: 80px; } 

 <div class="container">HOME</div> 

…但是文本前的邊框聽起來更像是左邊框：

 * { margin: 0; padding: 0; } .container { border-left: 2px solid black; background-color: purple; color: white; font-size: 50px; width: 300px; position: relative; top: 50px; left: 80px; } 

 <div class="container">HOME</div> 

Answer 2

display：塊將框放在文本之前； 另外，為了使:: before選擇器生成內容： 必須在其中添加文字。 我目前已隱藏內容，以使該框看起來是空的。

 * { margin: 0; padding: 0; } .container::before { border: 2px solid black; content: "."; color: purple; display: block; } .container { background-color: purple; color: white; font-size: 50px; width: 300px; position: relative; top: 50px; left: 80px; } 

 <div class="container">HOME</div>