Css 通过伪元素隐藏div内容

我正在尝试使用css和js创建一个简单的扫雷游戏。
我成功地创建了网格，放置了炸弹，并计算了相邻单元中的炸弹数量

我在隐藏单元格内容方面遇到了一些问题，直到玩家点击其中一个

我最初的想法是使用伪元素，失败后，我尝试在每个单元格的顶部堆叠一个div。
我失败了两次，所以我来了：） 请尽量减少帮助。 我现在想要实现的是在每个单元格顶部创建一种遮罩。 我以后会把它取下来的

谢谢

在Js中，有一条注释，我在其中创建了一个children div，并在其上应用了

.mask

在css中可以找到

.mask

类

我想通过使用伪类来实现它

功能启动（n）{
//放置炸弹
如果（n>30）{n=30；}
var nodeList=document.getElementsByClassName（“游戏单元”）；
gameCells=Array.from（节点列表）；
var totalCells=gameCells.length；
而（n>0）{
var index=Math.floor（Math.random（）*totalCells）；
gameCells[index].classList.add（'bomb'）；
配子细胞.剪接（索引，1）
全细胞--；
n--；
}
//地名
var cellsAbove=[-11，-10，-9]；
var cellsBelow=[9,10,11]；
var cellsOnLeft=[-11，-1,9]；
var cellsOnRight=[-9,1,11]；
gameCells=Array.from（节点列表）；
gameCells.forEach（（单元格、idx、arr）=>{
如果（！cell.classList.contains（'bomb'））{
var toIgnore=[]；
if（idx=90）{toIgnore=toIgnore.concat（cellsBelow）；}
如果（idx%10==0）{toIgnore=toIgnore.concat（cellsOnLeft）；}
如果（idx%10==9）{toIgnore=toIgnore.concat（cellsOnRight）；}
var adjacentCells=[-11，-10，-9，-1,1,9,10,11]
.filter（c=>toIgnore.indexOf（c）<0）
.map（c=>c+idx）
.map（c=>arr[c]）；
var bombNumber=adjacentCells.map（c=>c.classList.contains（'bomb'）？1:0）。reduce（（a，b）=>a+b，0）；
如果（bombNumber>0）游戏单元[idx]。innerText=bombNumber
}
});
//掩膜细胞
gameCells.forEach（n=>{
var mask=document.createElement（“div”）；
mask.classList.add（'mask'）
n、 儿童（面具）；
})
}
启动（10）
html，正文{
身高：100%；
保证金：0；
}
.游戏容器{
显示：网格；
网格模板行：15%重复（10，1fr）；
网格模板列：重复（10，1fr）；
行间距：0px；
柱间距：0px；
宽度：100%；
身高：100%；
对齐项目：居中；
证明项目：中心；
}
.比赛头球{
文本对齐：居中；
网格柱：1/-1；
}
.游戏牢房{
背景颜色：浅灰色；
盒影：插入3px 3px 10px#000000；
-moz盒阴影：插入3px 3px 10px#000000；
-webkit盒阴影：插入3px 3px 10px#000000；
身高：100%；
宽度：100%；
边框：1px纯黑；
框大小：边框框；
光标：指针；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.游戏单元：悬停{
边框颜色：#4ca4a9；
}
.炸弹{
背景颜色：浅粉色；
}
.面具{
/*背景颜色：灰色*/
位置：绝对位置；
左：0px；
顶部：0px；
右：0px；
底部：0px；
z指数：2；
}

我的游戏
如果使用
位置：绝对
在
.mask
类上，需要一个
位置：相对位置参考，如果我正确理解了你的问题，应该应用到
.game cell
类


功能启动（n）{
//放置炸弹
如果（n>30）{n=30；}
var nodeList=document.getElementsByClassName（“游戏单元”）；
gameCells=Array.from（节点列表）；
var totalCells=gameCells.length；
而（n>0）{
var index=Math.floor（Math.random（）*totalCells）；
gameCells[index].classList.add（'bomb'）；
配子细胞.剪接（索引，1）
全细胞--；
n--；
}
//地名
var cellsAbove=[-11，-10，-9]；
var cellsBelow=[9,10,11]；
var cellsOnLeft=[-11，-1,9]；
var cellsOnRight=[-9,1,11]；
gameCells=Array.from（节点列表）；
gameCells.forEach（（单元格、idx、arr）=>{
如果（！cell.classList.contains（'bomb'））{
var toIgnore=[]；
if（idx=90）{toIgnore=toIgnore.concat（cellsBelow）；}
如果（idx%10==0）{toIgnore=toIgnore.concat（cellsOnLeft）；}
如果（idx%10==9）{toIgnore=toIgnore.concat（cellsOnRight）；}
var adjacentCells=[-11，-10，-9，-1,1,9,10,11]
.filter（c=>toIgnore.indexOf（c）<0）
.map（c=>c+idx）
.map（c=>arr[c]）；
var bombNumber=adjacentCells.map（c=>c.classList.contains（'bomb'）？1:0）。reduce（（a，b）=>a+b，0）；
如果（bombNumber>0）游戏单元[idx]。innerText=bombNumber