伪元素必须设置非none的content值才能生成渲染节点；content: ""是最安全的空内容写法，可确保伪元素创建且无副作用；其他如content: none、content: normal或遗漏content均导致伪元素不进入渲染树。

伪元素不写 content 就根本不会生成渲染节点

浏览器规范强制要求 ::before 和 ::after 必须有非 none 的 content 值，否则整个盒模型跳过创建——不是“看不见”，是压根没进渲染树。DevTools 的 Computed 面板里连这条样式都不会出现。

常见误操作包括：

• 只写 display: block 和 background-color: red，漏掉 content
• 写了 content: none 或 content: normal，效果等同于没写
• 在普通选择器里误写 .box { content: "x" }，浏览器静默丢弃，无任何提示

content: "" 是最安全的“空内容”写法

content: "" 是唯一既合法、又零副作用的触发方式：它明确告诉浏览器“请创建一个真实存在的伪元素盒”，同时不输出字符、不撑高行距、不干扰垂直对齐。

其他写法风险较高：

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

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

下载

• content: " "（一个空格）在部分老版 Firefox 中会多出空白间隙
• content: "\00a0"（NO-BREAK SPACE）更可靠，但需注意 Unicode 转义格式
• content: attr(data-label) 依赖属性真实存在；若 HTML 缺失 data-label 属性，哪怕值为空字符串，伪元素仍不生成

伪元素在 Flex/Grid 容器中依然受 content 控制

Flex 容器只把“已生成的盒”当作 flex item。即使父容器是 display: flex，只要 content 缺失或为 none，伪元素就不会被纳入布局计算。

即使 content 存在，也要注意 display 值是否适配：

• display: inline（默认）下，flex-grow、align-self 可能失效
• display: block 或 display: flex 更稳妥，尤其需要宽高或内部嵌套时
• 避免 display: inline-block + flex 相关属性混用，Safari 旧版本易出问题

调试时优先确认 content 的计算值是否生效

伪元素“不显示”的八成原因卡在 content 上，而不是样式写错。真要排查，直接打开 DevTools：

• 看 Elements 面板里有没有 ::before 或 ::after 节点
• 切到 Computed 标签页，搜 content，确认计算值是不是 "" 或合法字符串
• 临时加 border: 1px solid red 和 display: block，快速验证是否真渲染

容易被忽略的是：全局重置 CSS（比如 * { content: normal }）或工具链插件（如 Tailwind 的 content-none）可能静默覆盖你的 content: ""，导致清除浮动、图标装饰等关键逻辑彻底失效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！