Dado el siguiente escenario, ¿por qué el: después del selector requiere una propiedad de contenido 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 cómo no ve el pseudo elemento hasta que especifique la propiedad de contenido:

.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 qué es esta la funcionalidad prevista? Usted pensaría que el bloque de visualización forzaría el elemento a aparecer. Por extraño que parezca, puedes ver los estilos dentro de los depuradores web; sin embargo, no se muestran en la página.