afterとbeforeプロパティを使ってdivの全外側を選択する方法

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>