С учетом следующего сценария, почему селектору: after требуется свойство содержимого для работы?

.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;
}

Обратите внимание, как вы не видите псевдоэлемент, пока не укажете свойство содержимого:

.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";
}

Почему это предполагаемая функциональность? Можно подумать, что блок отображения заставит элемент появиться. Как ни странно, вы можете увидеть стили внутри веб-отладчиков; однако они не отображаются на странице.