伪元素不显示的首要原因是content属性缺失或为none，此时伪元素盒模型根本不会创建；必须显式设置content: ""等非none值，再检查父元素是否设position: relative及伪元素display是否适配。
伪元素不显示？先检查 content 是否缺失
绝大多数 ::before 和 ::after 看不见，根本不是定位问题，而是没写 content。这两个伪元素默认无内容，position: absolute 再准也白搭。
必须显式声明：content: ""（空字符串）或 content: " "（带空格），但后者在部分浏览器中可能不渲染，建议统一用前者。
- 若依赖动态内容（如
content: attr(data-icon)），确保对应属性存在且非空 - Chrome/Firefox 的 DevTools 默认可能隐藏
content: ""的伪元素，别只靠“Elements”面板判断，加outline: 1px solid red看是否真没渲染 - IE11 及更早版本只认单冒号语法（
:before），双冒号（::before）会被忽略；兼容需求下可写成:before, ::before
position: absolute 伪元素飘到左上角？确认父容器有定位上下文
::before 或 ::after 使用 position: absolute 时，会相对于「最近的已定位祖先」偏移。如果父元素没设 position: relative（或 absolute/fixed/sticky），它就会上溯到 ，而 的 margin 或重置样式会让位置不可控。
- 给伪元素的直接父元素加
position: relative是最简单可靠的解法，哪怕它原本不需要定位 - 避免对
<span></span>这类display: inline元素直接设position: relative后再放absolute伪元素——老浏览器支持不稳定 - 表格行（
<tr>）在 Safari 中无法作为可靠定位上下文，<code>tr.spacer { position: relative }的::after会相对整个<table> 定位；改用 <code><td> 或换用 <code><ul></ul>/<menu></menu>+ Grid 布局伪元素尺寸/偏移不准？调整
display和定位方式::before/::after默认是display: inline，此时width、height、top、left全部无效。想精确控制，必须改display；同时，像素级偏移（如top: -2px）在字体缩放或响应式场景下极易失效。- 需要宽高或定位：设
display: block、inline-block或flex - 垂直居中（如下划线、装饰线）：用
top: 50%+transform: translateY(-50%)，而非依赖line-height或猜top值 - 图标类装饰：优先用
content: url(./icon.svg)，比 Unicode 字符（如content: "\f005"）更可控；记得设width/height，否则 SVG 按原始尺寸渲染 - 避免同时设
top和bottom——它们会挤压高度，除非明确写了height
滚动容器里
height: 100%伪元素只撑开固定高度？定位参考错了当父容器设了固定高度（如
height: 200px）+overflow: auto，伪元素的height: 100%是相对于这个固定值计算的，不是实际滚动内容高度。结果就是伪元素卡在 200px，不随内容往下延伸。- 解决方案：移除父容器的固定
height，改用max-height+overflow: auto，让伪元素的100%参照真实内容高度 - 若必须保留固定高度视觉，可用
min-height替代height，并配合position: absolute+bottom: 0控制伪元素底部锚点 - 注意：父容器需保持
position: relative，否则伪元素会脱离上下文跑到视口边缘
content、父元素没加position: relative、伪元素仍为display: inline。其他问题大多由这三者衍生而来。 - 需要宽高或定位：设
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
