Comment sélectionner tout le côté extérieur d'un div en utilisant la propriété avant et après

Question

Veuillez voir mon code 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>

ici je veux faire tout côté extérieur de la nouvelle div avec la couleur grise à l'aide avant et après la propriété. Comment puis-je obtenir cela. Quand iam utilise après et avant la propriété je peux obtenir le côté 2 seulement.

S'il vous plaît voir la photo ci-dessous. Je veux la sortie comme ça.

Answer 1

Je pense que c'est le même ce que vous voulez.

.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>