伪元素需作为独立网格子项定位，显式设置grid-row/grid-column覆盖目标单元格；默认尺寸为0，须用place-self: stretch或min-width/min-height撑满；层叠需position: relative配合z-index，动态场景下inset: 0更可靠。
伪元素不能直接“装饰某个单元格”，必须把它当作一个独立的网格子项来定位——它不依附于某个 grid-item，而是靠 grid-row 和 grid-column 落在目标单元格所在的轨道交点上。
伪元素必须显式声明位置才能覆盖指定单元格
很多人以为给某个 grid item 写 .item::before 就能“贴在它上面”，但实际中伪元素属于父容器（即 grid 容器）的子级，和所有真实子项平级。它不会自动继承子项的网格位置。
- 要覆盖第 2 行第 3 列的单元格，得在 grid 容器上写：
.grid::before { content: ""; grid-row: 2; grid-column: 3; } - 若该单元格本身跨多行（比如
grid-row: 2 / 4），伪元素只需落在同一轨道范围即可，例如grid-row: 2 / 4; grid-column: 3 - 别用
position: absolute+top/left模拟——一旦 grid 轨道尺寸变化（如响应式列宽重算），它就会偏移 - 如果单元格是动态生成的（比如 JS 插入、
repeat(auto-fit, ...)），硬编码grid-row: 2会失效；此时应改用命名线或配合 JS 动态注入grid-area
覆盖单元格时高度/宽度容易塌陷
伪元素默认按内容撑开，而 content: "" 没内容，导致它高度为 0、宽度为 0，即使设了 background 也看不见。
- 横跨整个单元格：加
place-self: stretch（最稳）或显式设width: 100%; height: 100% - 若单元格用了
minmax(0, 1fr)或auto，某些浏览器会压缩伪元素，此时min-width: 100%; min-height: 100%比单纯width/height更可靠 - 想只装饰边角（比如右下角小图标），可用
place-self: end end+width: 16px; height: 16px，避免拉伸变形
装饰层叠顺序常被忽略
伪元素默认渲染在所有子项之后（HTML 中靠后），但若想让它压在内容上或垫在底层，仅靠 DOM 顺序不够。
- 必须给伪元素加
position: relative（哪怕不移动），否则z-index无效 - 想盖住单元格文字：
z-index: 1；想垫在文字下面：z-index: -1，同时确保父容器没设overflow: hidden把它裁掉 - 多个伪元素之间层叠，按 CSS 声明顺序决定——后写的
::after默认在::before上方，除非显式干预z-index - 注意：若 grid 容器启用了
isolation: isolate或contain: paint，可能截断伪元素的层叠上下文，需临时关闭测试
真正难的不是让一条线出现在某处，而是当单元格因 grid-auto-rows 动态增高、或因内容溢出触发 align-content: start 导致轨道错位时，伪元素是否还严丝合缝地贴着内容边缘——这时候别依赖 place-self: stretch，留一手用 inset: 0 配合 position: absolute（在已设 position: relative 的容器内）反而更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
