伪元素不显示主因是content缺失或为none，导致盒未生成；其次需设display为block/inline-block才能生效尺寸定位，且须确保父元素可承载伪元素并存在已定位祖先。
伪元素不显示，八成是 content 没写、写错了，或者值被算成 none —— 它根本没进渲染树，不是“看不见”，是“不存在”。
为什么 content 缺失就等于没写这个伪元素
浏览器规范强制要求：::before 和 ::after 必须有非 none 的 content 值，才会生成一个盒（box）。没这个盒，后续所有样式（display、position、width）全失效。
-
content: ""合法，会生成空盒，可设背景、边框、尺寸 -
content: " "（一个空格）更稳妥，尤其在inline-block场景下避免折叠 -
content: none、content: normal、或干脆不写content→ 等同于跳过解析，DevTools 里都看不到节点 - 用
content: attr(data-label)时，HTML 中必须存在该属性，且不能是undefined或空字符串（data-label=""是合法的，但data-label属性本身缺失就不行）
content 写对了，但还是没影？检查 display 和父容器限制
content 存在只是第一步。伪元素默认是 display: inline，这意味着 height、width、top/left 全部无效 —— 不是 bug，是 CSS 规范行为。
- 要设尺寸或定位，必须显式加
display: block或display: inline-block - 在
flex容器里，仅靠content: ""不够，还得确保display值能参与 flex 布局（block或flex更可靠） - 父元素若为
img、input、textarea等可替换元素，::after直接被浏览器忽略（不是兼容性问题，是规范禁止）—— 解法：包一层<div> - 父元素设了
overflow: hidden，而伪元素用position: absolute移出范围，就会被裁掉
定位偏移后消失？重点盯 position 上下文和层叠
::after 加了 position: absolute 却找不到，大概率是因为没找到“已定位祖先”。它不会相对于父元素自动定位，除非那个父元素显式写了 position: relative（或 absolute、fixed、sticky）。
立即学习“前端免费学习笔记（深入）”；
- 别在
display: inline元素上直接套position: relative+::after，老浏览器支持不稳定 - 伪元素自身要有
z-index，前提是它已定位（position不是static），且父元素没意外创建新层叠上下文（比如用了transform或opacity: 0.99） - 用 DevTools 的 “Layout” 面板确认伪元素是否出现在渲染树中；如果连盒子都没出现，
content就是第一嫌疑点
真正卡住的时候，不要调 z-index 或 transform，先打开 DevTools，看 computed 标签页里 content 的最终值是不是 none，再看 display 是不是还卡在 inline。这两项错一个，后面全白忙。
