伪元素不显示的根本原因是content属性未设置或值为none，导致其未进入渲染树；需确保content为非none值（如""或attr()），并配合display:block/inline-block及定位上下文才能正常渲染。
content属性没写或值为none，伪元素根本不会生成
浏览器规范强制要求 ::before 和 ::after 必须有非 none 的 content 值，否则整个盒模型都不会创建——不是“看不见”，是压根没进渲染树。
-
content完全没写、写成content: none或content: normal，等同于没声明 -
content: ""合法，会生成空盒（可设背景、边框、尺寸）；但content: " "（一个空格）在display: inline-block场景下更稳妥，避免空白折叠 - 用
content: attr(data-label)时，HTML 元素必须真实存在data-label属性，且不能是缺失状态（data-label=""可以，但没这个属性就不行） - 含 Unicode 字符（如 →）必须转义：
content: "\2192"，直接写content: "→"可能因编码或字体缺失失效
伪元素存在但视觉不可见：display 和尺寸配置失效
::before/::after 默认是 display: inline，此时 width、height、top、left 全部无效——这是规范行为，不是 bug。
- 要设宽高或定位，必须显式加
display: block或display: inline-block - 纯装饰场景（比如仅用背景图），配合
content: ""就够了；但若想靠伪元素撑开空间，display: inline-block更可靠 - 父容器是
display: flex或display: grid时，伪元素仍遵循自身display值，但主轴对齐可能干扰位置，建议统一用display: block避免歧义 - 临时加
border: 1px solid red是最快验证是否真渲染的方法
定位偏移后“消失”：找不到已定位祖先
position: absolute 的伪元素不相对于父元素定位，而是找最近的「已定位祖先」（position 为 relative、absolute、fixed 或 sticky）。找不到就按视口定位，极易跑出可视区。
- 最简解法：给伪元素的直接父元素加
position: relative - 避免在
display: inline元素（如<span></span>）上直接设position: relative后再挂伪元素，老浏览器兼容性差 - 父容器设了
overflow: hidden，而伪元素用top: -10px偏移，就会被裁掉——检查 computed 样式里的overflow值 - 用 DevTools 的“Layout”面板高亮伪元素盒子，看坐标是否异常（比如
left: -9999px）
伪元素被禁止使用：可替换元素不支持
<img alt="为什么CSS的伪元素::before和::after无法显示？" >、<input>、<textarea></textarea>、<select></select> 这类可替换元素，CSS 规范明确禁止在其上使用 ::before/::after——浏览器直接跳过解析，不报错也不生成节点。
立即学习“前端免费学习笔记（深入）”；
-
img::after { content: "×" }永远无效，无论样式怎么调 - 解法：用
<div> 包一层，把伪元素挂到外层容器上 <li>某些 CSS 重置库（如 Normalize.css）会全局设 <code>*::before, *::after { content: "" }，可能意外覆盖你后续未带content的规则 - 检查 DevTools 的 “Computed” 面板，确认伪元素的
content最终值是不是none，再看display是否还卡在inline——这两项错一个，后面全白忙
真正卡住的时候，别急着调
z-index 或 transform，先打开 DevTools 看 content 计算值和伪元素盒子是否存在。很多问题其实就卡在第一行样式里。
