CSS网格避免在网格中使用：：before和：：after

当我使用CSS网格时，一些网格如何将前后作为网格元素。有办法解决这个问题吗

.wrapper{
显示：网格；
网格模板列：100px 100px 100px；
栅隙：10px；
背景色：#fff；
颜色：#444；
}
.wrapper：：之前{
内容：“：：在元素之前”；
}
.wrapper：：之后{
内容：“：：在元素之后”；
}
.盒子{
背景色：#444；
颜色：#fff；
边界半径：5px；
填充：20px；
字体大小：150%；
}

A.
B
C
D
E
F

试试这个

.wrapper::after, .wrapper::before{ display:none !important;}

---

您可以更改它们的顺序，使它们始终位于末尾，并添加一些属性来隐藏它们。这样你肯定他们不会打扰你

.wrapper{
显示：网格；
网格模板列：100px 100px 100px；
栅隙：10px；
背景色：#fff；
颜色：#444；
}
.wrapper：：之前{
内容：“：：在元素之前”；
订单:9999 ;；
可见性：隐藏；
显示：无；
身高：0；
溢出：隐藏；
}
.wrapper：：之后{
内容：“：：在元素之后”；
订单:9999 ;；
可见性：隐藏；
显示：无；
身高：0；
溢出：隐藏；
}
.盒子{
背景色：#444；
颜色：#fff；
边界半径：5px；
填充：20px；
字体大小：150%；
}

A.
B
C
D
E
F

显示：无

？为什么：：在前面和：：在后面？他们实现了什么目的？了解这一点会使您更容易解决问题。它是由woocommerce动态创建的。您希望发生什么？如果要将它们用作页眉或页脚，即跨越整个网格宽度，请在其上使用

网格列：1/-1

。只需在这些框消失之前和之后删除内容即可？不确定你还想要什么？也试试看！重要的是，您还可以添加

不透明度：0

以确保其消失；）