伪元素不显示需同时设置 content: "" 和 display: block 或 display: contents，否则无盒模型且不参与网格布局。

伪元素不显示？先检查 content 和 display

伪元素 ::before 或 ::after 在 Grid 容器里默认不参与网格布局，根本原因是它没内容、不是块级元素。哪怕父容器写了 display: grid，只要没显式声明 content: ""，它就不会生成盒模型，DevTools 里都看不到。

必须加这两条：

• content: "" —— 缺一不可，空字符串也得写
• display: block（兼容性稳）或 display: contents（更干净，但 Firefox

如果用了 grid-template-areas，伪元素无法直接用区域名定位，得靠 grid-row/grid-column 显式指定轨道位置。

横线/竖线定位总错位？关键在 grid-row 和 grid-column 的起止逻辑

想在两行之间插横线，不能只写 grid-row: 2，那只是“占第 2 行轨道”，而横线要的是“跨在第 2 行和第 3 行之间”——本质是占据一条**行间隙轨道**。

正确做法是让伪元素落在目标间隙对应的行线编号上，并横向铺满：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 横线：用 grid-row: 3（第 3 条水平线，即第 2 行下方），配合 grid-column: 1 / -1 横跨所有列
• 竖线：三列布局 grid-template-columns: 1fr 1fr 1fr 共有 4 条垂直线，第 2 道竖线应放 grid-column: 4（第 4 条线），再设 grid-row: 1 / -1
• 若启用了 direction: rtl 或 writing-mode: vertical-rl，1 / -1 会反向，建议改用 grid-column-start + grid-column-end 显式控制

别依赖 margin 或 position: absolute 模拟，它们脱离网格流，轨道尺寸一变就错位。

线太细看不见？height/width 和 min-height 得配齐

伪元素设了 background-color 却不显示，大概率是因为没给尺寸。Grid 项默认按内容撑开，空伪元素高度为 0。

• 横线必须设 height: 1px（或 min-height: 1px），否则背景色再亮也看不见
• 竖线对应设 width: 1px（或 min-width: 1px）
• 若轨道用了 minmax(0, 1fr) 或含 auto，某些浏览器会把伪元素压缩到 0，此时 min-height 比 height 更可靠
• 加 place-self: center 防止被拉伸变形，尤其当轨道高度不一致时

gap 背景线 vs 伪元素线？选哪个取决于你是否需要「精确控制」

用 gap + 容器 background-color 是最轻量的边框线方案，但它只能填满所有间隙，没法只画某一行或某一列的线，也没法做圆角、渐变、虚线等装饰。

• 要统一间隔、简单分隔 → 用 gap: 1px + background-color，子项 background-color: transparent
• 要某两列之间加粗竖线、某行下方加阴影横线、或带图标角标 → 只能靠伪元素 + grid-row/grid-column
• 伪元素方案在滚动容器中更稳定；gap 方案在 IE 中完全失效，且 overflow: auto 下可能裁掉边缘背景

真正难的不是怎么画线，而是想清楚这根线属于「网格结构的一部分」还是「视觉装饰层」——前者用 gap，后者才轮到伪元素上场。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！