CSS中能否在:empty伪类中使用content属性实现空元素内容填充？

你编写的代码不生效是因为content CSS 属性仅支持作用于::before、::after这类伪元素选择器，不能直接给普通元素设置该属性插入内容。

给空.item元素绑定伪元素插入指定文本即可，代码如下：

/* 替换::before为::after也可实现相同效果 */
.item:empty::before {
  content: "Content";
}

• :empty伪类的匹配规则非常严格，只有元素内部完全不存在任何内容（包括空格、换行、注释、子元素等所有节点）时才会命中规则。如果你的.item元素为空时可能残留空白字符，可以使用兼容性稍弱的:blank伪类，它会自动忽略内部的空白节点：

.item:blank::before {
  content: "Content";
}

• 如需调整默认展示文本的样式，直接在上述伪元素的样式规则中追加对应CSS属性即可。

内容的提问来源于stack exchange，提问作者Andrew Mooweek