伪元素不生成的首要原因是content属性缺失或为none，此时伪元素盒模型根本不会创建；content: ""虽合法但仅生成空盒，可靠占位应使用content: " "。
content属性没写或写成空字符串导致伪元素不生成
浏览器规范明确要求：::before 和 ::after 必须有非 none 的 content 值，否则整个伪元素盒模型都不会创建——不是“看不见”，而是“根本不存在”。
-
content完全缺失、写成content: none或content: normal，等同于没写 -
content: ""合法但只生成空盒；若需可靠占位，改用content: " "（一个空格）更稳妥 - 含 Unicode 字符时必须转义，比如箭头 → 要写成
content: "\2192"，写content: "→"可能因编码问题失效 - 用
content: attr(data-label)时，先确认对应元素真有data-label属性且值非空字符串
伪元素存在但视觉上“消失”了
即使 content 正确，也常因样式配置让伪元素不可见。这不是渲染失败，而是被隐藏或挤没了。
- 父容器
overflow: hidden会裁掉超出部分，尤其当伪元素用position: absolute偏移时 - 伪元素默认是
display: inline，设了width/height或position: absolute却没改display，尺寸不会生效 - 常见修复：加
display: block或display: inline-block - 检查是否被
visibility: hidden、opacity: 0、颜色与背景一致、或z-index被其他层盖住
定位失效：absolute偏移后不见踪影
position: absolute 的 ::after 会相对于最近的「已定位祖先」（position 为 relative、absolute、fixed 或 sticky）定位。若找不到，就按初始包含块（通常是视口）定位——极易跑出可视区。
- 确保父元素显式设置了
position: relative（或其他非static值） - 避免在
display: flex或display: grid容器里直接依赖position: absolute偏移，容易因主轴对齐干扰位置计算 - 用浏览器开发者工具的“元素高亮”功能，看伪元素盒是否真的生成、尺寸是否为 0、坐标是否异常
img、input 等可替换元素上伪元素无效
img、input、textarea、select 这类可替换元素，规范禁止在其上使用 ::before/::after ——不是兼容性问题，是 CSS 引擎直接跳过解析。
- 试图写
img::after { content: "×" }不会报错，但也不会生成任何节点 - 替代方案：给
img包一层<span></span>或<div>，伪元素挂载在外层容器上 <li>类似地，自定义组件若用了 Shadow DOM，需确认伪元素规则是否作用于正确的作用域内</li> 伪元素的问题大多卡在“有没有”和“在哪”，而不是“好不好看”。最该盯死的是 <code>content是否真实存在、父容器是否允许它伸展、目标元素本身是否支持伪元素——这三点漏掉任意一个，后面调再久的z-index或transform都没用。
