伪元素不渲染的首要原因是content属性为空或缺失，此时浏览器直接跳过渲染；即使写了::before/::after，若content为none、空字符串””（显式设置时合法）或未声明，则均不生成盒模型。
content 属性为空或缺失导致 ::before/::after 不渲染
伪元素默认不会显示，哪怕写了 ::before 或 ::after，只要 content 值为 none、空字符串 ""（未显式设置时等效于 none），浏览器就直接跳过渲染。这是最常见也最容易被忽略的原因。
-
content: ""是合法且常用写法，表示插入空内容（但元素本身存在，可用于布局或装饰） -
content: none会彻底禁用伪元素，连盒模型都不生成 - 完全不写
content等价于content: none，不是“默认为空”，而是“不创建” - 若想显示文字，必须显式写如
content: "箭头";；若只是占位或画边框，必须写content: ""
伪元素缺少 display 或尺寸导致视觉上“看不见”
即使 content 正确设置了，::before 和 ::after 默认是 display: inline，且没有宽高、背景、边框等样式时，在页面上完全不可见——不是没渲染，是渲染了但“透明无体积”。
- 加
display: block或inline-block才能设width/height - 纯图标类场景常配合
background-image+content: ""使用 - 用
border或box-shadow测试是否真渲染：加一句border: 1px solid red，立刻能看到盒子位置 - 注意父元素是否设置了
overflow: hidden，可能把伪元素裁掉
伪元素被其他 css 规则意外覆盖或重置
某些 CSS 重置库（如 Normalize.css）或组件框架会全局设置 *::before, *::after { content: "" }，看似安全，实则会覆盖你后续未带 content 的声明；更隐蔽的是 all: unset 或 content: inherit 这类继承行为。
- 检查开发者工具中伪元素的
content计算值，确认它最终不是none - 避免在通用选择器里写
::before/::after，尤其不要配content: ""后又在子选择器里删掉content -
content不继承，但all: revert或all: unset会影响它，慎用 - 如果用了 CSS-in-js 或 Shadow dom，注意作用域隔离可能导致伪元素规则未生效
兼容性与特殊字符处理问题
老版本 safari（≤15.4）对 content 中的 Unicode 转义（如 276F）支持不稳定；另外，HTML 实体（>）在 content 里不解析，必须用 Unicode 或字面量。
立即学习“前端免费学习笔记（深入）”；
- 写箭头推荐用字面量：
content: ">"或content: "→"，比2192更可靠 - 需要动态内容时，不能靠
content: attr(data-label)显示 HTML，它只输出纯文本，标签会被转义显示 -
content: url(...)在部分环境（如打印样式表、某些 webview）可能不加载，建议 fallback 到背景图 - 伪元素不支持伪类（如
::before:hover），交互效果得靠父元素状态驱动
真正卡住的时候，先打开开发者工具，选中元素，手动在 ::before 规则里敲一行 content: "test"; display: block; background: #000; color: #fff; —— 能看到，说明路径通；看不到，再查 content 值和父容器限制。