伪元素::before不显示主因是content未声明或值非法（如none、normal），导致未进入渲染树；需设合法content（如""）并配display:block/inline-block及定位上下文。
伪元素 ::before 不显示，90% 是因为 content 没写、写错，或写了但值非法——它根本没进渲染树，后续所有样式都白搭。
content 属性缺失或值为 none/normal/unset
浏览器规范强制要求 ::before 必须有非 none 的 content 值，否则直接跳过创建盒模型。DevTools 里连节点都看不到，更别说动画、背景、定位了。
-
content: ""是最稳妥的写法，生成空盒，可设宽高、背景、边框 -
content: " "（引号内一个空格）也能触发渲染，但部分旧安卓 WebView 会忽略单空格 -
content: none、content: normal、content: unset全部等效于没写，伪元素不生成 - 漏掉英文引号（比如写成
content: →）会导致整条 CSS 规则解析失败，DevTools 中该规则会灰掉 - 用
content: attr(data-icon)时，HTML 元素必须真实存在data-icon属性，且不能是缺失状态（data-icon=""可以，data-icon缺失则不渲染）
伪元素渲染了但页面上完全看不见
这时它其实“在”，DevTools Elements 面板能看到 ::before 节点，Computed 样式里 content 值也对，但页面空白。本质是没体积、没颜色、没位置。
-
::before默认是display: inline，此时width、height、top、left全部无效——必须显式设display: block或display: inline-block - 临时加
border: 1px solid red或outline: 1px solid blue，立刻确认盒子是否生成并定位到预期位置 - 父元素若设了
overflow: hidden，而伪元素用position: absolute偏移出边界，就会被裁掉 - 检查
color是否为transparent，或background-color是否和父背景一致 - 用
content: url()时，去 Network 面板确认图片请求是否 404 或被 CORS 拦截
定位失效、飘走或被遮挡
position: absolute 的 ::before 不相对于父元素定位，而是找「最近的已定位祖先」——即 position 为 relative、absolute、fixed 或 sticky 的祖先。找不到就按视口定位，极易跑出可视区。
立即学习“前端免费学习笔记（深入）”；
- 给伪元素的**直接父元素**加
position: relative是最简单可靠的解法，哪怕它原本不需要定位 -
z-index只在定位元素上生效：必须同时有position（非static）+z-index，否则无效 - 父元素若含
transform、filter或will-change，会创建新层叠上下文，导致伪元素的z-index相对范围变小，容易被盖住 - 表格行（
<tr>）在 Safari 中无法作为可靠定位上下文；<img>、<input>等可替换元素根本不支持::before，浏览器静默跳过
旧版安卓（如 Android 4.2.x）下完全不渲染
老安卓 WebView 对伪元素解析极其严格：容错率低，一个引号错误或 display 不匹配，整条规则就静默失效，还不报错。
- 必须用单冒号语法：
:before，双冒号::before在 Android 4.2 WebView 中不稳定 - 父元素必须显式设为
display: inline-block或display: block（仅display: inline不够） - 伪元素自身也要配
display: block或display: inline-block，否则尺寸和定位无效 - Unicode 字符必须转义为
\XXXX格式（如content: "\2192"），直接写→易因编码或字体缺失失效 - 避免用
attr()引用带连字符的属性（如data-tooltip-text），某些版本解析失败；优先用无连字符名（如datatooltip）
真正难调的不是某一行 CSS，而是多个隐式约束叠加：content 合法 + display 匹配 + 定位上下文存在 + 层叠上下文可控 + 资源加载成功。调试时别只盯着“为什么没动”，先确认“它到底有没有被浏览器当真”。
