伪元素不显示的首要原因是content值被浏览器判定为none或未声明，导致盒模型根本未生成；必须使用合法content值（如content: ""）并配合display: block等显式显示类型才能生效。
伪元素写了 content 却不显示，大概率不是“没生效”，而是它根本没生成盒子——content 值实际被浏览器判定为 none 或未声明，后续所有样式（display、width、position）全失效。
content 值是否真被浏览器识别为非 none？
这是最常卡住人的第一关。浏览器对 content 的合法性极其苛刻，写错一个字符就静默跳过整个伪元素。
-
content: ""✅ 合法，生成空盒；但必须带英文引号，content: ""不行，content: ''在部分构建环境不稳定，统一用双引号 -
content: "→"❌ 可能因文件编码或字体缺失失效；应改用 Unicode 转义：content: "\2192" -
content: attr(data-tip)✅ 但 HTML 元素必须真有data-tip属性，且值不能是undefined、null或完全缺失；data-tip=""可以，data-tip没赋值就不行 -
content: none、content: normal、content: initial、content: unset、完全不写content→ 全部等效于“不创建伪元素”，DevTools 的 Elements 面板里根本看不到::after节点
伪元素生成了，但尺寸/定位不起作用？
就算 content 正确，伪元素默认是 display: inline，这意味着你写的 width、height、margin-top、flex-grow 全部被忽略——它存在，但没体积、没位置感。
- 要设宽高或参与 Flex 布局，必须显式加
display: block（最通用）或display: inline-block（内联场景慎用，旧版 Safari 对inline-block + height支持差） - 用
position: absolute时，必须确保父元素已设position: relative；否则伪元素会相对于视口定位，极易跑出屏幕 - 在
display: flex容器里，伪元素不会自动变成 flex item——只有content存在 +display显式设置后，它才进入 flex items 列表；否则 DevTools Layout 面板里查不到它 - 临时验证是否真渲染：加一句
border: 1px solid red，立刻能看到盒子是否存在、尺寸是否为 0、坐标是否异常
伪元素被父容器或上下文“吃掉”了？
即使 content 和 display 都对，它也可能被视觉上抹除，原因往往藏在父级样式里。
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden的父容器会裁掉伪元素，尤其当它用负margin或transform微调位置时，哪怕只偏移 2px 也会被砍掉 - 可替换元素（
img、input、textarea、select）上直接写img::after是无效的——规范禁止，浏览器直接跳过解析；得包一层<div>，伪元素挂载到外层 <li>用了 Shadow DOM 的自定义组件，CSS 规则必须明确作用于影子根（Shadow Root）内部，否则伪元素规则根本进不了作用域</li> <li> <code>z-index太低或父元素没建立层叠上下文（比如没设position: relative），伪元素可能被兄弟元素盖住；想让它浮在文字上，得配position: relative+z-index: 1（父元素已有定位的前提下）
真正难排查的从来不是“怎么让它出现”，而是“它到底存不存在”。盯死三点：DevTools 里有没有 ::after 节点、Computed 面板中 content 的最终值是不是 none、父元素是否允许它伸展或定位——漏掉任意一个，后面调样式都是在给空气调试。
