如何选择使用之后和之前的属性的所有外侧

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>