伪元素不显示的首要原因是content属性缺失或值非法，此时浏览器直接跳过渲染；必须显式设置content: ""、content: " "或content: attr(data-tip)等有效值，且需确保宿主元素非替换元素、父容器未设overflow: hidden等限制。
::before 和 ::after 没显示？先看 content 是否写了，没写就根本不会渲染，不是浏览器问题，是 CSS 规范强制要求。
为什么伪元素样式写了但完全不出现
最常见原因是 content 属性缺失或值非法。浏览器对 ::before 和 ::after 的处理非常严格：只要 content 没显式声明，整个伪元素就被跳过，后续所有样式（哪怕 background-color、width 都设了）全无效。
-
content: ""可触发渲染，但内容为空，可能“看不见”——适合纯装饰性占位 -
content: " "（一个空格）更稳妥，尤其配合display: inline-block时不易塌陷 -
content: attr(data-tip)要确认对应元素真有该属性，且值非空字符串（data-tip=""等同于没写） -
content: none或content: normal是无效值，会被忽略，等同于没设
Chrome DevTools 里怎么快速定位伪元素是否被禁用
打开 Chrome 开发者工具（F12），选中目标元素，在右侧面板切换到 Styles 标签页，直接搜索 ::before 或 ::after：
- 如果规则名旁有灰色小三角 ▶，说明语法错误（比如用了中文冒号、漏了分号、拼错属性名）
- 如果整行样式被划掉，且右侧显示“
inherited from …”或“user agent stylesheet”，说明它根本没匹配到当前元素 - 切到 Computed 标签页，搜
content，看计算值是不是none—— 是的话，证明content没生效
伪元素存在但“不可见”的真实原因
即使 content 正确，也可能因样式冲突或布局限制导致视觉上消失：
-
color或background-color和父容器一致 → 在 Computed 面板里查实际计算出的颜色值 - 没设
display，又没内容撑开尺寸 → 显式加display: block或inline-block - 父元素有
overflow: hidden，而伪元素用position: absolute移出边界 → 临时删掉overflow测试是否恢复 - 加在
<input>、<img>这类替换元素上 → 大部分浏览器（Chrome/Firefox）根本不支持它们的::after，别白费劲
兼容性陷阱：哪些伪元素在 Chrome 里压根不认
不是所有伪元素都能在 Chrome 当前版本稳定工作：
-
::placeholder：全局重置规则如* { all: unset; }或input { appearance: none; }会直接切断其渲染通道 -
::marker：Chrome 90+ 才开始支持color和font-size，旧版只当透明；Safari 15.4 前基本不响应 -
::file-selector-button等新伪类：仅 Chromium 111+ 支持，低版本 Chrome 会静默忽略整条规则
真正容易被忽略的是：伪元素一旦被 UA 样式或强重置规则压制，DevTools 的 Styles 面板里可能连那条规则都看不到——它压根没进入匹配流程。所以遇到“样式写了却像没写一样”，第一反应不该是改代码，而是用 Computed 面板反向验证 content 和 display 的最终计算值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
