html - 如何使用 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>

这里我想使用 after 和 before 属性将 new-div 的所有外侧都设为灰色。我怎么能得到这个。当我使用 after 和 before 属性时，我只能得到 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>