伪元素不设content就不会渲染，因为content是其存在开关：缺省或为none时浏览器跳过渲染，即使设置display、background等样式也无效；只有content值合法（如""、"文本"、url()等）才生成渲染框。
伪元素不设 content 就不会渲染
浏览器引擎（如 Blink、WebKit）在解析 CSS 时，对 ::before 和 ::after 的处理逻辑是：**只有当 content 值不为 none 且可计算出有效内容时，才会创建对应的伪元素渲染框**。哪怕 content: ''（空字符串），也满足“存在内容”的条件；而完全省略 content，等价于 content: none，此时伪元素被跳过，后续所有样式（display、position、background 等）全部失效。
content 是伪元素的“存在开关”，不是“内容开关”
很多人误以为 content 只控制显示什么文字或图片，其实它本质是触发伪元素实例化的必要条件。以下情况都算“有效 content”：
-
content: ''—— 常用于清除浮动、占位、绘制纯图形（如小三角） -
content: '→'或content: '\2192'—— 插入 Unicode 字符 -
content: url(arrow.svg)—— 插入图像资源 -
content: attr(data-label)—— 动态取 HTML 属性值 -
content: counter(section)—— 结合计数器生成编号
但只要缺了这一行，哪怕写了 display: block; width: 20px; height: 20px; background: red;，也什么都看不到。
为什么设计成这样？和 DOM 无关，是渲染层契约
伪元素不是 DOM 节点，不参与 HTML 解析与树构建，只在样式计算（Style Calculation）和布局（Layout）阶段由 CSSOM 驱动生成。浏览器需要一个明确信号来决定“是否为此元素开辟渲染空间”，content 就是这个信号。这种设计避免了无意义的渲染开销——比如你只想用 ::after 做定位锚点，但又不希望它影响文档流，那就用 content: '' + position: absolute，干净利落。
立即学习“前端免费学习笔记（深入）”；
注意：::first-line 和 ::first-letter 不受此限制，它们不依赖 content，因为作用对象是已有文本内容的子片段，而非“生成新内容”。
容易忽略的兼容性细节
虽然现代浏览器对 content 的支持很稳定，但仍有几个实际坑点：
- IE8 只支持单冒号写法
:before/:after，且content中不能用attr()或counter() -
content: normal在部分旧版 Safari 中行为异常，建议统一用''表达“空内容” - 使用
url()时，路径相对的是 CSS 文件位置，不是 HTML，容易 404；建议优先用内联 data URL 或字体图标 -
content的值无法通过 JavaScript 设置（element.style.content = 'x'无效），只能改 class 或注入 style 标签
真正难调试的，往往不是“怎么写”，而是忘了写 content 这一行——它太短，太容易被眼滑过去。
