content生成内容无法影响:empty伪类

HTML

<div class="demo">
    <h4>有内容</h4>
    <div class="box">有内容</div>
    <h4>无内容</h4>
    <div class="box"></div>
    <h4>空格也算内容</h4>
    <div class="box"> </div>
    <h4>伪元素不算内容</h4>
    <div class="box pseudo"></div>
</div>
					    

CSS

.demo > h4 {
    width: 256px;
    margin: 1.5em auto 0.5em;
    text-align: left;
}
.demo > h4:first-child { margin-top: 0; }
.box {
    width: 216px;
    padding: 10px;
    border: 10px solid #cd0000;
    margin: auto;
}
.box:empty { border-style: dashed; }
.pseudo::after { content: "伪元素生成内容"; }
				    

JS

//no