伪元素不显示的首要原因是未设置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。
