Warum benötigt der: after-Selektor in dem folgenden Szenario eine content-Eigenschaft, um zu funktionieren?

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

Beachten Sie, dass Sie das Pseudoelement erst sehen, wenn Sie die content -Eigenschaft angeben:

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

Warum ist dies die beabsichtigte Funktionalität? Sie würden denken, dass der Anzeigeblock das Element zum Anzeigen zwingen würde. Seltsamerweise können Sie die Stile in Web-Debuggern sehen. Sie werden jedoch nicht auf der Seite angezeigt.