Dado o seguinte cenário, por que o seletor: after requer uma propriedade de conteúdo para funcionar?

.test {
    width: 20px;
    height: 20px;
    background: blue;
    position:relative;
}
			
.test:after {
    width: 20px;
    height: 20px;
    background: red;
    display: block;
    position: absolute;
    top: 0px;
    left: 20px;
}

<div class="test"></div>

Observe como você não vê o pseudo elemento até especificar a propriedade de conteúdo:

.test {
    width: 20px;
    height: 20px;
    background: blue;
    position:relative;
}
			
.test:after {
    width: 20px;
    height: 20px;
    background: red;
    display: block;
    position: absolute;
    top: 0px;
    left: 20px;
    content:"hi";
}

<div class="test"></div>

Por que essa é a funcionalidade pretendida? Você poderia pensar que o bloco de exibição forçaria o elemento a aparecer. Curiosamente, você pode realmente ver os estilos dentro de depuradores da web; no entanto, eles não são exibidos na página.