Problem with not being able to display a ::before element in css

Question

html code

<div class="cell "></div>

css code

.cell::before{
    content: '';
    width: 80px;
    height: 80px;
    background-color: black;
}

after this i checked my browser there was nothing then i just added this one line

.cell{
    display:flex;
}

then the browser showed the black box .

why is that ?

i couldn't try much , does having display as anything else also sort this problem ?