伪元素未渲染的首要原因是未设置content属性；必须显式声明content（如""或" "），且需确保字体加载、父元素可见、定位与层叠上下文正确，否则无法进入渲染树。
伪元素没渲染，先看::before和::after有没有内容
伪元素默认不显示，除非设置了content属性——这是最常被忽略的前提。空字符串content: ""可以触发渲染，但content: none或完全不写content，浏览器直接跳过生成。
-
content必须存在，哪怕只是content: " "（带空格）或content: "" - 如果用
content: attr(data-tip)，确保对应元素有data-tip属性，且值非空（空字符串可，undefined或缺失则不渲染） - 不要在
display: none的元素上加伪元素——父元素隐藏，伪元素也一并消失
检查是否被display、visibility或z-index压制
伪元素是“附着”在宿主元素上的，它的层叠上下文、可见性、盒模型行为都受宿主影响，也受自身样式约束。
-
display: inline元素的伪元素不能设width/height，除非同时设display: inline-block或block -
visibility: hidden会隐藏伪元素；opacity: 0不会，但pointer-events: none可能让调试工具点不到它 - 如果伪元素被盖住，先查它父元素有没有
position: relative，再确认伪元素自己有没有position: absolute+z-index，且父容器不是transform或filter创建的新层叠上下文（这会让z-index失效）
遇到content是图标却显示方块？查字体和font-family
用content: "\e900"这类 Unicode 引用图标字体时，不显示往往不是伪元素问题，而是字体没加载或没匹配上。
- 确保
@font-face已声明且字体文件可访问（检查 Network 面板里字体请求状态） -
font-family必须精确匹配@font-face里的font-family值，大小写、空格都不能错 - 别依赖系统字体栈兜底——
font-family: "icon-font", sans-serif中，一旦"icon-font"失败，后续字体无法渲染该 Unicode 码点 - 用 DevTools 的 Computed 面板看最终生效的
font-family和content值，确认没被覆盖或计算为空
Flex/Grid 容器里伪元素位置异常？注意order和flex属性不作用于伪元素
伪元素不是真实 DOM 节点，不会参与 Flex 或 Grid 的顺序重排，也不会响应flex相关属性（如flex-grow），但它会受容器align-items、justify-content影响。
立即学习“前端免费学习笔记（深入）”；
- 想让
::after在 Flex 容器末尾对齐？不能靠order，得用margin-left: auto或justify-content: space-between配合结构 -
grid-area不能直接赋给伪元素；若需网格定位，得用position: absolute+inset等替代 - 伪元素的
width/height在 Flex 容器中可能被压缩为 0——加flex-shrink: 0或显式设min-width防塌陷
伪元素的问题，八成卡在content没写、字体没加载、或者父容器的 display/position 把它“吞”了。DevTools 里右键伪元素看不到菜单？那基本说明它根本没进渲染树——先回第一条，把content补上再说。
