伪元素在grid容器中不显示是因为默认为行内元素且需content属性；必须设content: ""并推荐display: block或contents（注意ie不支持），定位用grid-column/grid-row最可靠，装饰优化宜用border/box-shadow和repeating-linear-gradient。
伪元素在Grid容器里为啥不显示
因为 ::before 和 ::after 默认是行内元素，而 Grid 容器的子项必须是块级或弹性/网格项目才能参与布局；如果父容器设了 display: grid，但没给伪元素显式声明 content 或设置 display，它就压根不会渲染。
- 必须写
content: ""，哪怕只是空字符串 - 推荐加
display: block或display: contents（后者可让伪元素“透传”为网格项，但兼容性注意：IE 不支持） - 若父容器用了
grid-template-areas，伪元素无法直接命名区域，得靠grid-area手动指定位置
用 grid-column / grid-row 定位伪元素是否可靠
完全可靠，而且是最推荐的方式——它和普通 Grid 子项定位逻辑一致，不受文档流干扰，也不依赖 position: absolute 的脱离行为。
-
grid-column: 2 / 4表示从第 2 条线开始，到第 4 条线结束（含第 2、3 列） - 配合
z-index可轻松控制装饰层叠顺序，比如让::before当背景格线，::after当高亮角标 - 注意：若 Grid 容器设置了
grid-auto-flow: column，伪元素仍按行定位逻辑生效，别被流向误导
装饰格线频繁重绘导致卡顿怎么办
伪元素本身不触发重排，但若用 background-image 画密集网格，或在滚动容器里大量使用 transform 动画，就会掉帧。
- 优先用
border或box-shadow模拟细线，比 CSS 渐变或 SVG 背景更轻量 - 避免在
::before里塞大尺寸background-size: 2px 2px网格图，改用repeating-linear-gradient（更省内存） - 如需动画，只对
opacity或transform做操作，禁用left/top或width/height
Firefox 下 display: contents 伪元素失效
Firefox 直到 v115 才完整支持 display: contents 用于伪元素，旧版本会直接忽略该声明，导致伪元素退化为默认行内表现，定位失效。
- 检测方式：在 DevTools 中看伪元素是否出现在 Elements 面板的“Layout”标签下
- 降级方案：改用
display: block+ 显式grid-column/grid-row，兼容性拉满 - 若必须用
contents，加@supports (display: contents)特性查询做包裹
网格装饰真正难的不是画几条线，而是当 Grid 列数动态变化、或响应式断点切换时，伪元素的行列跨度要不要跟着算——这时候别硬编码 grid-column: 1 / -1，留个 JS 计算钩子更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
