CSS伪元素::before在实现空状态提示图时怎么用？-css教程-PHP中文网

空状态提示图不必须用::before，但它是目前最轻量、无js侵入的方案；前提是目标元素能被:empty准确识别，即真正“空”，不含任何文本节点（包括换行、缩进、空格）。

css伪元素::before在实现空状态提示图时怎么用？

空状态提示图必须用 `::before` 吗？

不是必须，但它是目前最轻量、无 JS 侵入的方案。前提是目标元素能被 :empty 准确识别——即真正“空”，不含任何文本节点（包括换行、缩进、空格）。如果服务端模板输出带空格的 <ul>\n</ul>，:empty 就不匹配，::before 自然不会显示。

`:empty ::before` 的 content 值怎么写才生效？

必须显式声明 content，哪怕只是空字符串；否则伪元素完全不渲染。常见写法有：

content: ""; —— 配合 background-image 显示 SVG 或 PNG 图标（推荐，语义干净）
content: "\2714"; —— Unicode 字符（注意是 \2714，不是 \u2714）
content: attr(data-icon); —— 动态读取 HTML 属性，如 <ul data-icon="no-data"></ul>

别忘了给 ::before 设 display: block 或 inline-block，否则宽高、定位都无效。

为什么图标没显示或位置错乱？

两个高频原因：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

父容器没设 position: relative，导致 absolute 定位的 ::before 相对于 body 偏移
::before 默认是 display: inline，不能设 width/height，也没法用 flex 对齐——必须手动改 display

例如居中一个 SVG 提示图：

.list:empty::before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  margin: 20px auto;
  background: url("data:image/svg+xml,%3Csvg...%3E") no-repeat center;
}