伪元素在Grid中无法直接占据轨道，需显式设置grid-area或grid-row/grid-column定位，并声明content: ""和place-self以确保正确渲染。
伪元素在Grid中无法直接占据轨道？先确认容器设置
Grid布局里用 ::before 或 ::after 插入分割线，前提是父容器必须是 display: grid，且伪元素要参与网格项排列——但默认情况下伪元素不自动成为网格子项。必须显式声明 grid-area 或用 place-self + grid-row/grid-column 定位，否则它会渲染在网格容器外或被压缩成零尺寸。
- 确保父容器设置了
display: grid和明确的grid-template-rows/grid-template-columns - 给伪元素添加
content: ""（否则无内容、无盒模型） - 避免只靠
margin或position: absolute模拟分割线——那样脱离网格流，无法响应轨道尺寸变化
让 ::before 占据一整行/列轨道的写法
最可靠的方式是用 grid-column 或 grid-row 跨越目标轨道，并配合 place-self 控制对齐。例如在两行内容之间插一条横线：
.grid-container {
display: grid;
grid-template-rows: auto 1fr auto;
/* 第二行是内容区，想在它下方加横线 */
}
<p>.grid-container::after {
content: "";
grid-row: 3;
grid-column: 1 / -1; /<em> 从第一列到最后一列 </em>/
height: 1px;
background: #e0e0e0;
place-self: center; /<em> 防止被拉伸变形 </em>/
}-
grid-column: 1 / -1比1 / 4更安全——适应列数变化 - 必须设
height（横线）或width（竖线），否则即使有背景也看不见 - 若轨道是
minmax(0, 1fr)或含auto，需注意伪元素可能被压缩；此时加min-height: 1px更稳妥
竖向分割线容易错在 grid-row 范围和书写模式
竖线常用于多列布局中间，比如三列卡片间加两道竖线。错误做法是只设 grid-column: 2，结果线只出现在第二列“内部”，而非列与列之间。
- 列间隙（
gap）不能直接选中，所以竖线得放在“虚拟列轨道”上：比如三列布局grid-template-columns: 1fr 1fr 1fr，共3列内容轨道 + 2个间隙位置 → 可用第4列轨道放第一道竖线：grid-column: 4 - 更清晰的做法是显式定义列轨道数：用
grid-template-columns: 1fr max-content 1fr max-content 1fr，把max-content列专用于放竖线 - 注意：若启用
direction: rtl或writing-mode: vertical-rl，grid-column的起始方向会变，建议统一用grid-column-start/grid-column-end显式控制
性能与可访问性提醒：别用伪元素承载语义内容
伪元素生成的内容不会出现在 DOM 树中，屏幕阅读器通常忽略 content 里的纯字符（如 "|"），也不支持 aria- 属性。如果分割线有功能含义（如区分表单区块），应该用真实 <hr> 或带 role="separator" 的空 <div>。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>仅作视觉装饰时，伪元素完全够用；但若需键盘焦点、动画控制或 JS 交互，务必改用真实元素</li>
<li>大量使用伪元素分割线（比如每行都加）可能触发频繁重排，尤其在动态增删网格项时；此时考虑用 <code>border 或 box-shadow 替代
background 需配合 @media (prefers-color-scheme: dark) 重置，不能依赖继承实际项目里最容易漏的是 content: "" 和 place-self ——没这两句，伪元素要么不显示，要么撑满整个轨道变成遮罩。
