伪元素不显形需同时满足三点：content: ""不可省略；父容器设position: relative/absolute/fixed；伪元素设position: absolute并明确top/left等偏移值。
伪元素不显形？先确认 content: "" 和定位上下文
直接写 .box::before { background: #ccc; width: 1px; height: 20px; } 是不会显示的——content: "" 缺失，伪元素就没有盒模型；父容器没设 position: relative，position: absolute 就会相对于 body 定位，线跑出屏幕外。常见错误现象是：开发者工具里能看到伪元素节点，但渲染区域为空白或被裁剪。
必须同时满足三点：
-
content: ""（不可省略，哪怕只是空字符串） - 父容器有
position: relative（或absolute/fixed） - 伪元素设
position: absolute并明确top/left等偏移值
如果父容器是 display: flex 或 display: grid，还要注意：伪元素默认不继承父布局行为，width: 100% 在 flex 子项里只撑开文字宽度，不是容器宽；此时应改用 left: 0; right: 0; 配合 top 控制位置。
::before 画竖线时，right: 0 和 left: 100% 效果不同
想在文字右侧加一条竖线，有人写 left: 100%，结果线贴着文字最右边缘、甚至重叠；有人写 right: 0，线却跑到容器最右边去了。根本区别在于参考系：left: 100% 是从容器左边缘起算 100%，而 right: 0 是从容器右边缘起算 0 —— 两者在容器宽度变化时行为不一致。
立即学习“前端免费学习笔记（深入）”；
更可控的做法是固定锚点：
- 文字容器设
position: relative - 伪元素用
position: absolute; top: 0; bottom: 0; - 竖线放右边：写
right: -1px;（负值微调，避免和文字间距不统一） - 竖线放中间：写
left: 50%; transform: translateX(-50%);，比left: calc(50% - 0.5px)更抗缩放
注意：移动端 dpr=2 时，width: 1px 实际渲染为 2 物理像素，线变粗。稳妥方案是 transform: scaleY(0.5) 替代 height: 0.5px，浏览器对 sub-pixel 的 transform 渲染更稳定。
Grid 布局中用伪元素画列间竖线，grid-column 必须按线号写
三列布局 grid-template-columns: 1fr 1fr 1fr，实际有 4 条列线（1–2–3–4），不是 3 列就写 grid-column: 2 / 3。这条规则常被忽略，导致伪元素消失或错位。比如要在第二、三列之间画竖线，得写 grid-column: 3 / 4（即第 3 条线到第 4 条线之间），而不是 grid-column: 2 / 3（那是第一、二列之间）。
动态列数（如 repeat(auto-fit, minmax(200px, 1fr)))）下，静态 grid-column: 3 / 4 会失效。此时不能硬编码线号，应改用背景方案：background: repeating-linear-gradient(90deg, transparent, transparent 1fr, #ccc 1fr, #ccc calc(1fr + 1px), transparent calc(1fr + 1px));，靠渐变模拟竖线，完全脱离线号依赖。
调试建议：浏览器开发者工具勾选 “Show grid line numbers”，直观确认线号分布；若伪元素仍不可见，优先检查是否漏了 content: ""，或父容器 overflow: hidden 把它裁掉了。
需要响应式缩短线长？别用 width: 100px，改用容器约束
在标题文字两侧加横线，写 width: 100px 看似简单，但缩放页面、换字体、切到小屏时线立刻溢出或过短。真正健壮的做法是让线长度由容器控制，而非固定值。
推荐组合：
- 包裹文字的容器设
max-width: 200px（或响应式断点下调整） - 伪元素设
width: 100%，并加display: block（否则 inline-level 下无效） - 用
margin-left: 8px和margin-right: 8px控制文字与线间距，比靠left/right偏移更稳定
慎用 vw 单位——它按视口宽度算，嵌套在 modal 或 sidebar 里时，线长会严重失真。如果必须适配深色模式，统一用 CSS 变量：border-color: var(--line-color)，配合 @media (prefers-color-scheme: dark) 切换变量值，避免伪元素重绘问题。
复杂点往往不在“怎么画”，而在“怎么让它不随字号、缩放、dpr、嵌套层级一起失控”。多数时候，border-bottom 比 ::after 更可靠；只有当需要独立定位、悬停触发、或避开内容流时，才值得上伪元素这套逻辑。
