如何選擇使用之後和之前的屬性的所有外側

Question

請參閱我的html代碼。

.new-div{ 
 
    width:200px; 
 
    height:200px; 
 
    border:1px solid orange; 
 
    text-align:center; 
 
} 
 

 
.new-div::before{ 
 
content: "&nbsp"; 
 
position: absolute; 
 
top: 0; 
 
width: 100%; 
 
z-index: 90; 
 
background-color: gray; 
 
left: 0; 
 

 
} 
 
.new-div::after{ 
 
content: "&nbsp"; 
 
position: absolute; 
 
bottom: 0; 
 
width: 100%; 
 
z-index: 90; 
 
background-color: gray; 
 
left: 0; 
 

 
}

<div class="new-div"> 
 
    content 
 
</div>

在這裏，我想使新-DIV的所有外側使用後，財產之前的灰色。我怎麼能得到這個。當我使用之後和之前財產我只能得到2方。

請看下圖。我想要這樣的輸出。

Answer 1

我想這是一樣的，你想要什麼。

.new-div{ 
 
    width:200px; 
 
    height:200px; 
 
    border:1px solid orange; 
 
    text-align:center; 
 
    margin:0 auto; 
 
    background-color:#fff; 
 
} 
 

 
.new-div::before{ 
 
content: "&nbsp"; 
 
position: absolute; 
 
top: 0; 
 
width: 100%; 
 
z-index: -1; 
 
height:100%; 
 
background-color: gray; 
 
left: 0; 
 

 
} 
 
.new-div::after{ 
 
content: "&nbsp"; 
 
position: absolute; 
 
bottom: 0; 
 
width: 100%; 
 
z-index: 90; 
 
background-color: gray; 
 
left: 0; 
 

 
}

<div class="new-div"> 
 
    content 
 
</div>