Hide div content via pseudo element

Question

I'm trying to create a simple minesweeper game using css and js.
I managed to create the grid, place bombs, and count the number of bombs in the adjacent cells.

I'm having some issue at hiding the cell content till the player click on of them.

My initial idea was to use a pseudo-element, and after failing i tried to stack a div on top of each cell.
I failed twice, so here I am :) Please try to give as less help as possible. What I'm trying to achieve now, is to create a sort of mask on top of each cell. I'll take care of removing it later.

Thanks!

In the Js, there's a comment where i create a children div and applied a .mask on it.

In the css you can find the .mask class

I'd like to make it by using a pseudo class.

function start(n) {
    // place bombs
    if(n > 30) { n = 30; }
    var nodeList = document.getElementsByClassName("game-cell");
    gameCells = Array.from(nodeList);
    var totalCells = gameCells.length;
    while(n > 0 ) {
        var index = Math.floor(Math.random() * totalCells);
        gameCells[index].classList.add('bomb');
        gameCells.splice(index, 1)
        totalCells--;
        n--;
    }

    //place numbers
    var cellsAbove = [-11, -10, -9];
    var cellsBelow = [9, 10, 11];
    var cellsOnLeft = [-11, -1, 9];
    var cellsOnRight = [-9, 1, 11];
    gameCells = Array.from(nodeList);
    gameCells.forEach( (cell, idx, arr) => {
        if(!cell.classList.contains('bomb')) {
            var toIgnore = [];
            if (idx<10)     { toIgnore = toIgnore.concat(cellsAbove);  }
            if (idx>=90)    { toIgnore = toIgnore.concat(cellsBelow);  }
            if (idx%10===0) { toIgnore = toIgnore.concat(cellsOnLeft); }
            if (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);
            if(bombNumber>0) gameCells[idx].innerText = bombNumber
        }
    });

    //mask cells 
    gameCells.forEach( n => {
        var mask = document.createElement("div");         
        mask.classList.add('mask')
        n.appendChild(mask); 
    })
}

start(10);

html, body {
    height: 100%;
    margin: 0;
}


.game-container {
    display: grid;
    grid-template-rows: 15% repeat(10, 1fr);
    grid-template-columns: repeat(10, 1fr);
    row-gap: 0px;
    column-gap: 0px;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-items: center;

}

.game-header {
    text-align: center;
    grid-column: 1 /-1;
}

.game-cell {
    background-color: lightgray;
    box-shadow: inset 3px 3px 10px #000000;
    -moz-box-shadow: inset 3px 3px 10px #000000;
    -webkit-box-shadow: inset 3px 3px 10px #000000;
    height: 100%;
    width: 100%;
    border: 1px solid black;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.game-cell:hover {
    border-color: #4ca4a9;  
}
 
.bomb {
    background-color: lightpink;
}

.mask {
    /* background-color: gray; */
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 2;
}

    <div class="game-container">
        <header class="game-header"> My Game </header>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
    </div>

yes it was enough. i always forget that the position prop work on the first positioned ancestor — Robdll, May 27 '20 at 23:01
but i'd like to make it by using a pseudo class, is that possible? — Robdll, May 27 '20 at 23:04
@TemaniAfif you just set this as duplicate but it's not answering my question. I was looking for a way to make it via pseudo element — Robdll, May 27 '20 at 23:06
you said it *was enough* so I closed as duplicate ... I was waiting for your reply to close — Temani Afif, May 27 '20 at 23:07
to use pseudo element simply move the mask class to the element then add pseudo element: https://jsfiddle.net/6xga3L0z/ — Temani Afif, May 27 '20 at 23:09

score 1 · Answer 1 · answered May 27 '20 at 22:56

If you use position: absolute; on the .mask class, you need a position:relative; position reference for it, which - if I understood your question correctly - should be applied to the .game-cell class.

function start(n) {
    // place bombs
    if(n > 30) { n = 30; }
    var nodeList = document.getElementsByClassName("game-cell");
    gameCells = Array.from(nodeList);
    var totalCells = gameCells.length;
    while(n > 0 ) {
        var index = Math.floor(Math.random() * totalCells);
        gameCells[index].classList.add('bomb');
        gameCells.splice(index, 1)
        totalCells--;
        n--;
    }

    //place numbers
    var cellsAbove = [-11, -10, -9];
    var cellsBelow = [9, 10, 11];
    var cellsOnLeft = [-11, -1, 9];
    var cellsOnRight = [-9, 1, 11];
    gameCells = Array.from(nodeList);
    gameCells.forEach( (cell, idx, arr) => {
        if(!cell.classList.contains('bomb')) {
            var toIgnore = [];
            if (idx<10)     { toIgnore = toIgnore.concat(cellsAbove);  }
            if (idx>=90)    { toIgnore = toIgnore.concat(cellsBelow);  }
            if (idx%10===0) { toIgnore = toIgnore.concat(cellsOnLeft); }
            if (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);
            if(bombNumber>0) gameCells[idx].innerText = bombNumber
        }
    });

    //mask cells 
    gameCells.forEach( n => {
        var mask = document.createElement("div");         
        mask.classList.add('mask')
        n.appendChild(mask); 
    })
}

start(10);

html, body {
    height: 100%;
    margin: 0;
}


.game-container {
    display: grid;
    grid-template-rows: 15% repeat(10, 1fr);
    grid-template-columns: repeat(10, 1fr);
    row-gap: 0px;
    column-gap: 0px;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-items: center;

}

.game-header {
    text-align: center;
    grid-column: 1 /-1;
}

.game-cell {
    background-color: lightgray;
    box-shadow: inset 3px 3px 10px #000000;
    -moz-box-shadow: inset 3px 3px 10px #000000;
    -webkit-box-shadow: inset 3px 3px 10px #000000;
    height: 100%;
    width: 100%;
    border: 1px solid black;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position:relative;
}

.game-cell:hover {
    border-color: #4ca4a9;  
}
 
.bomb {
    background-color: lightpink;
}

.mask {
    /* background-color: gray; */
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 2;
}

<div class="game-container">
        <header class="game-header"> My Game </header>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
    </div>

P.S.: In the code of your question's snippet, you are not using a pseudo element, so maybe you should change the title of your question...

thanks for the fix! Is there any way to do it using a pseudo element? — Robdll, May 27 '20 at 23:02

Hide div content via pseudo element

1 Answers1