伪元素不显示的首要原因是未设置content属性，必须显式声明content: ""等值；其次检查父容器是否设置了position:relative等定位属性；最后需调整display为block或inline-block才能生效width/height和定位。
伪元素不显示？先确认是否设置了 content
绝大多数 ::before 和 ::after 不出现的问题，根本原因不是定位，而是漏写了 content。这两个伪元素默认没有内容，即使设了 position: absolute 也看不见。
-
content必须显式设置，哪怕只是content: "" - 如果只写
content: " "（空格），某些浏览器可能不渲染，建议用""或" "加display: inline-block - 若依赖生成内容（如图标、计数），确保字符串或
attr()值存在且非空
absolute 定位失效？检查父容器的 position 上下文
::before 和 ::after 使用 position: absolute 时，会相对于「最近的已定位祖先」（即 position 为 relative、absolute、fixed 或 sticky 的祖先）进行偏移。如果父元素没设 position，它就可能跑到 body 边缘甚至被裁剪。
- 给伪元素的直接父元素加
position: relative是最常用解法 - 避免对
display: inline元素（如）直接设position: relative后再放absolute伪元素——某些老浏览器对 inline 元素的相对定位支持不稳定 - 如果父容器是 flex 或 grid 容器，
position: relative依然有效，但注意子项的align-self或justify-self可能影响布局基准
伪元素被遮挡或尺寸异常？留意 display 和 z-index 行为
::before 和 ::after 默认是 display: inline，这会导致 width/height、top/left 等属性无效，除非显式改 display。
- 需要精确控制尺寸和定位，必须设
display: block、inline-block或flex -
z-index只在定位元素上生效，所以position: absolute+z-index才能控制层叠顺序 - 伪元素的层叠上下文由其父元素决定；如果父元素有
transform、opacity 等，可能意外创建新层叠上下文，导致z-index失效
兼容性与调试技巧：别只靠 DevTools 直观判断
Chrome/Firefox 的开发者工具默认可能不显示空 content 的伪元素，或者在“Computed”面板里隐藏了未生效的样式，容易误判。
立即学习“前端免费学习笔记（深入）”；
- 在 Elements 面板中右键元素 → “Edit as HTML”，手动插入一个临时
对比样式表现 - 用
outline: 1px solid red替代border查看真实渲染区域（border可能因box-sizing被吞掉） - IE11 及更早版本只支持单冒号语法（
:before），双冒号（::before）会被忽略——如需兼容，用单冒号或同时写两者
