Biorąc pod uwagę następujący scenariusz, dlaczego selektor: after wymaga właściwości content do działania?

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

Zauważ, że nie widzisz pseudo elementu, dopóki nie określisz właściwości treści:

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

Dlaczego jest to zamierzona funkcjonalność? Można by pomyśleć, że blok wyświetlacza wymusiłby pojawienie się elementu. Co dziwne, możesz zobaczyć style wewnątrz debugerów internetowych; jednak nie wyświetlają się na stronie.