伪元素不显示的首要原因是content属性未正确设置或缺失；必须显式声明content（如content: ""），否则display等样式无效；其次需排除父容器overflow: hidden裁剪、可替换元素禁用伪元素等问题。
display设了但伪元素还是不显示？先确认content有没有
伪元素根本不会渲染，除非你写了content。哪怕只写content: ""，也比不写强；写成content: none、content: normal或漏掉这一行，浏览器就当它不存在——后续所有display、width、background-color全白搭。
常见误操作包括：
- 在预处理器（如 Sass）里用了
@if逻辑，结果编译后content被删了 - 复制粘贴时带了全角引号或不可见字符，比如
content：“”（中文冒号+中文引号） - JS 动态注入样式表时，字符串拼接漏了引号：
content: ${text}→ 实际变成content: abc，非法值
::before/::after默认是inline，宽高margin上下都不生效
display: inline是伪元素的初始值，它不响应width、height、margin-top、margin-bottom。你设了display: block却没效果？大概率是content还没写，或者被其他规则覆盖了。
可靠写法示例：
.tag::before {
content: "";
display: inline-block; /* 或 block */
width: 8px;
height: 8px;
background: #007bff;
margin-right: 6px;
}
注意：inline-block比block更适合内联场景，避免换行；若需绝对定位，display仍要显式声明，否则top/left可能不触发重排。
父容器overflow: hidden或替换元素上直接用伪元素
伪元素生成了，但“看不见”，常因布局限制被裁掉或根本不允许生成：
-
overflow: hidden的父容器会裁剪超出区域的伪元素，尤其当你用position: absolute把::after移出边界时 -
<img>、<input>、<textarea></textarea>等可替换元素，规范禁止在其上使用伪元素——Chrome/Firefox 都跳过解析，不报错也不渲染 - Shadow DOM 内部若未在
:host或::slotted作用域正确声明，伪元素规则不会穿透生效
验证方法：临时删掉父元素的overflow，或给<img>包一层<span class="img-wrapper"></span>，伪元素挂到外层。
开发者工具里看不到伪元素节点？重点查Computed里的content值
打开 Chrome DevTools，选中目标元素，在Computed面板搜索content：
- 如果计算值是
none，说明content没生效（语法错、被unset覆盖、或属性名拼错） - 如果整条
::before规则在Styles面板里被划掉，且右侧标着“inherited from user agent stylesheet”，代表选择器没匹配到该元素 - 右键元素 → “Force element state” → 勾选
:hover等，再看伪元素是否出现，可排除状态依赖问题
真正卡住人的地方，往往不是display设得不对，而是content压根没走通，或者父元素类型根本不支持——这两个点不先钉死，调再多z-index和transform都没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
