是的，::before 和 ::after 伪元素必须声明 content 属性，否则不会渲染；合法值包括空字符串、引号包裹的文本、attr()、url() 及引号相关关键字，非法值如 none、auto 等无效。
伪元素的 content 属性是否必须？
是的，::before 和 ::after 伪元素必须声明 content，否则不会渲染。这是 CSS 规范强制要求——没有 content 值（包括空字符串 ""）的伪元素会被浏览器忽略，即使设置了其他样式（如 color、background）也完全不可见。
content 的合法值有哪些？
它不是任意字符串都能用，必须是规范定义的值类型：
-
content: ""—— 空字符串，最常用，用于仅靠背景/边框/尺寸实现的装饰性元素 -
content: "文本"—— 普通字符串，注意需用引号包裹（单/双均可） -
content: attr(data-label)—— 动态取 HTML 属性值，要求该属性存在且非空 -
content: url(logo.svg)—— 插入图片，路径相对 CSS 文件位置解析 -
content: open-quote / close-quote / no-open-quote—— 引号相关，需配合quotes属性使用
非法写法：content: none、content: auto、content: inherit（这些在标准中无效，部分浏览器会静默忽略或报 warning）。
不写 content 会怎样？常见误判场景
开发者常误以为“只要加了 display: block 或 width/height 就能看见伪元素”，结果调试半天发现没渲染——根本原因就是漏了 content。典型错误包括：
立即学习“前端免费学习笔记（深入）”；
- 复制粘贴时删掉了
content行，只留background: #000 - 用预处理器（如 Sass）写了
@if $show-icon { content: "→"; }，但条件为 false 导致整个content声明被剔除 - 动态生成 CSS 时，拼接字符串漏了
content:或引号 - 误把
content写成contents（拼写错误，CSS 不报错但无效）
/* ✅ 正确：即使只想要一个纯色方块，也要写 content */
.icon::before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
background: #333;
}
<p>/<em> ❌ 错误：下面这段不会渲染出任何东西 </em>/
.icon::before {
display: inline-block;
width: 12px;
height: 12px;
background: #333;
}
content 对可访问性和 SEO 的影响
虽然伪元素内容不进入 DOM 树，但部分屏幕阅读器（如 NVDA + Firefox）会读出 content 中的纯文本，而 Chrome + JAWS 则通常忽略。因此：
- 不要用
::before/::after放关键操作提示（如“必填”“错误”），应使用真实 HTML 元素 - 图标类文本（如
"→"、"•"）一般无语义，不影响 SEO；但若塞入关键词（如content: "联系我们"），既违反语义化原则，也不被搜索引擎视为有效内容 -
attr()取值依赖 HTML 属性，若属性本身有语义（如aria-label），则伪元素内容可能被辅助技术识别，但行为不稳定，不建议依赖
伪元素的 content 是开关，不是装饰项。漏掉它，整个伪元素就不存在——哪怕你给它写了 20 行样式。
