伪元素不显示的首要原因是content属性缺失或为none，此时浏览器跳过创建盒模型；必须设非none值如content: ""，并配合display: block等块级显示才能生效。
content属性缺失或值为none导致伪元素根本不生成
浏览器规范强制要求 ::after 必须有非 none 的 content 值，否则整个伪元素盒模型跳过创建——不是“看不见”，是压根没进渲染树。
-
content完全没写、写成content: none或content: normal，效果等同于没声明 -
content: ""合法且常用，会生成空盒（可设宽高/背景） -
content: " "（一个空格）也能触发渲染，但可能带来意外行高，不推荐作为默认占位 - 用
content: attr(data-tip)时，必须确认对应 HTML 元素真有该属性，且值非undefined或缺失；data-tip=""可以，data-tip缺失则不渲染
display类型未显式设置导致height/width无效
::after 默认是 display: inline，而 inline 元素无视 height、width、margin-top/bottom 等块级样式。写了也白写。
- 要让尺寸生效，必须加
display: block（最稳妥）或display: inline-block（适合内联场景） - 旧版 Safari 对
display: inline-block+height支持不稳定，生产环境建议统一用block - 若只设了
content: ""但没加背景、边框或尺寸，伪元素虽存在却完全不可见——加一句border: 1px solid red是最快验证是否真渲染的方法
父容器或定位上下文导致伪元素“消失”在视野外
即使 content 和 display 都对了，::after 仍可能因定位失效跑出可视区，尤其用 position: absolute 时。
-
position: absolute的::after会相对于最近的「已定位祖先」（position为relative、absolute、fixed或sticky）定位；若找不到，就按视口定位——极易偏移出屏幕 - 确保父元素显式设了
position: relative，别依赖默认static -
overflow: hidden的父容器会裁掉超出部分，哪怕伪元素只是用负margin或transform微调位置 - 在
display: flex或display: grid容器里，伪元素不参与主轴对齐计算，justify-content或align-items可能让它被“挤没”，需改用margin-left: auto或inset定位
替换元素（如img、input）上伪元素直接被忽略
CSS 规范明确禁止在可替换元素（img、input、textarea、select）上使用 ::before/::after——不是兼容性问题，是引擎直接跳过解析。
- 写
img::after { content: "×" }不报错，但 DevTools 里根本看不到节点 - 解决方案：给
img包一层<div>，把伪元素挂载到外层容器上 <li>自定义组件若用了 Shadow DOM，需确认 CSS 规则作用域是否覆盖到影子根（Shadow Root）内部</li> <li>某些 CSS-in-JS 库或重置样式（如 <code>*::after { content: "" }）可能意外覆盖你后续规则，用 DevTools 的 Computed 面板查最终content值是否被重置为none
真正卡住的时候，第一反应不该是调
z-index 或 opacity，而是打开 DevTools 的 Elements 面板，展开目标元素，看 ::after 节点是否存在；如果连节点都没有，问题一定出在 content 或父元素可见性上。
