必须写。不设置content属性，::before和::after伪元素完全不会渲染，即使设置了background-color、width、height也无效；content是唯一强制属性，空内容也需显式写content: ""。
伪元素 ::before 和 ::after 必须写 content 吗？
必须写。不设置 content 属性，::before 和 ::after 伪元素**完全不会渲染**，哪怕你写了 background-color、width、height 也无效。
-
content是唯一强制属性，没有例外（包括空内容也要显式写content: ""） - 即使只是想画一个纯色方块或做 clearfix，也得先写
content: "" - 值可以是字符串（
content: "→"）、Unicode（content: "\2714"）、图片（content: url(./icon.svg)）、计数器（content: counter(section)），或空字符串
content 的写法陷阱：引号、空格、特殊字符
看似简单，但错一个字符就让伪元素“消失”。常见失效原因：
- 字符串值**必须加引号**：
content: "✓"✅；content: ✓❌（语法错误，整个规则被浏览器忽略） - 拼接属性值时，常量仍需引号：
content: "[" attr(data-id) "]";✅；content: "[" + attr(data-id) + "]";❌（CSS 不支持加号拼接） - 空格要用 Unicode：
content: "\00a0";（ ），不能直接写content: " "（部分浏览器会忽略首尾空格） - 尖括号、引号等需转义：
content: "\003cdiv\003e";表示<div>
为什么设置了 content 还看不到？常见隐形坑
写了 content: "" 却没效果？大概率掉进了这些坑里：
-
目标元素是空元素：如
<img>、<input>、<textarea>—— 它们在多数浏览器中**不支持**::before/::after（Firefox/Chrome 对表单控件限制尤其严格） -
display 模式未调整：伪元素默认是
inline，设了width/height无效。要加display: block或display: inline-block，或用position: absolute脱离文档流 -
父元素 overflow: hidden：如果伪元素用
position: absolute偏移出边界，而父容器有overflow: hidden，内容会被裁剪 -
z-index 层级被盖住：伪元素默认 z-index 为 auto，若和兄弟元素重叠，可能被遮挡，需显式设
z-index
兼容性与现代写法建议
双冒号 ::before 是 CSS3 规范写法，单冒号 :before 是旧语法。虽然所有现代浏览器都支持两者，但要注意：
立即学习“前端免费学习笔记（深入）”；
- IE8 只认单冒号，但 IE8 已淘汰，新项目**一律用
::before和::after**，语义清晰且避免和伪类（如:hover）混淆 -
content中使用attr()读取 HTML 属性时，属性名大小写敏感，且只读取元素的**HTML 属性**（不是 JS 设置的dataset） - 伪元素无法被 JavaScript 获取（
document.querySelector("::before")报错），也不能绑定事件，所有交互逻辑必须靠真实 DOM 元素承载
.icon-btn::before {
content: "\2605"; /* Unicode 星星 */
display: inline-block;
margin-right: 6px;
color: #ff6b35;
}
<p>.clearfix::after {
content: "";
display: table;
clear: both;
}伪元素不是“可选装饰”，而是 CSS 布局与样式表达的关键机制；content 就是它的开关——没它，一切归零。最常被忽略的，其实是空元素限制和 inline 默认行为，这两个点卡住的人，远多于写错引号的。
