直接用 border 比 ::after 更稳妥，因其语义清晰、渲染稳定、兼容性好，且不会被 overflow: hidden、transform 或 flex 布局意外裁剪或塌陷；而 ::after 默认 inline-level，width: 100% 在 flex 中常只撑文字宽，移动端易因 dpr 导致 1px 线模糊或变粗。
为什么直接用 border 比 ::after 更稳妥？
绝大多数场景下，该优先用 border-bottom 或 border-top 实现分割线。它语义清晰、渲染稳定、兼容性好，且不会因父容器的 overflow: hidden、transform 或 flex 布局意外裁剪或塌陷。而 ::after 默认是 inline-level 元素，width: 100% 在 flex 容器里常只撑开文字宽度，不是容器宽度；在移动端还容易因 dpr 导致 1px 线变粗或模糊。
::after 画竖线时怎么避免最后一个元素也显示？
别用 .item:last-child::after { display: none; } —— 这会触发重绘，且在动态列表中可能失效。正确做法是直接限定作用范围：
- 用
.item:not(:last-child)::after，确保伪元素只生成在非末尾项后 - 必须写
content: ""，否则不创建盒模型 - 设
position: absolute+right: 6px+top: 50%+transform: translateY(-50%)居中对齐，比用top: 0+height更抗字号变化 - 若父元素未设
position: relative，绝对定位会相对于 body，导致错位
文字两侧加横线，为什么 flex 比 width 更可靠？
用 width: 40px 控制横线长度，在缩放、不同字体或响应式下极易错位。真正健壮的做法是让伪元素参与 flex 布局：
- 文字容器（如
h2）设display: inline-flex; align-items: center; -
h2::before, h2::after设content: ""; flex: 1; border-top: 1px solid #ccc; - 文字本身用
span包裹，加margin: 0 16px避免贴边 - IE11 不支持
inline-flex中伪元素的flex行为，需降级为display: table+table-cell布局
Grid 布局里用 ::after 加竖线，grid-column 怎么写才不消失？
伪元素默认不参与网格轨道分配，光写 content: "" 是无效的。关键是要把它当成一个“隐形网格项”来定位：
立即学习“前端免费学习笔记（深入）”；
- 必须显式声明
grid-column: 2 / 3（表示第 2 条列线到第 3 条列线之间，即第二列右侧） - 列线编号从 1 开始，三列布局有 4 条线：1–2–3–4，
grid-column: 3 / 4才是第三列右侧 - 写成
grid-column: 3或grid-column: 2 / 2都不会渲染——前者无结束线，后者跨度为 0 - 搭配
place-self: stretch让它撑满整列高度，再设width: 1px; background: #ccc; - 动态列数（如
repeat(auto-fit, ...)）下，静态grid-column会失效，此时应改用repeating-linear-gradient背景模拟
overflow: hidden 裁掉，以及是否漏写了 content: "" —— 这两个问题占调试时间的七成以上。 
