如何让CSS Grid中H3的::before伪元素跨所有列显示

首先明确：CSS Grid只会把容器的直接子元素当作网格项，H3的::before伪元素是H3的子元素，不属于Grid容器的直接子元素，所以Grid不会将其视为网格项，自然没法用grid-column让它跨列。给你几个实用的解决方案：

方案一：绝对定位结合容器相对定位（快速实现） #

给Grid容器设置相对定位，让伪元素相对于整个容器定位，从而实现边框横跨两列：

/* 定义Grid容器 */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 1.5rem;
  position: relative; /* 关键：让伪元素以容器为参照 */
  padding-top: 1rem; /* 避免第一个边框贴容器顶 */
}

/* H3样式 */
h3 {
  grid-column: 1;
  position: relative;
  margin-top: 2rem; /* 给边框预留空间 */
}

/* 伪元素边框 */
h3::before {
  content: '';
  position: absolute;
  top: -1rem; /* 调整边框和H3的间距 */
  left: 0;
  /* 计算宽度：左列宽度 + gap + 右列宽度 = 容器总宽度 */
  width: calc(200% + 1.5rem);
  /* 向左移动左列宽度+gap，让边框从容器最左侧开始 */
  transform: translateX(calc(-100% - 1.5rem));
  height: 1px;
  background-color: #333;
}

注意：这个方法依赖固定的列数和gap值，列数变化时需要调整计算式。

方案二：H3跨列+内部子元素定位（灵活通用） #

把H3设置为横跨两列，用内部span控制标题在左列显示，H3的顶部边框自然就会横跨两列：

<main class="grid-container">
  <h3><span>标题1</span></h3>
  <p>正文1内容...</p>
  <h3><span>标题2</span></h3>
  <p>正文2内容...</p>
</main>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 1.5rem;
}

/* H3横跨两列，添加顶部边框 */
h3 {
  grid-column: 1 / -1;
  border-top: 1px solid #333;
  padding-top: 1rem;
  margin-top: 2rem;
}

/* 标题内容对齐左列 */
h3 span {
  display: block;
  width: calc(25% - 0.75rem); /* 左列占比：1/(1+3)=25%，减去一半gap */
}

/* 调整正文和标题的垂直对齐 */
p {
  grid-column: 2;
  margin-top: -2.7rem;
}

这个方案不依赖列数，后续调整Grid布局时边框会自动适配，适用性更强。

方案三：容器伪元素+固定行号（仅适用于静态结构） #

如果你的内容是严格的H3+P交替结构，可以用Grid容器的伪元素指定行号来添加边框：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 1.5rem;
}

/* 第一个H3上方的边框 */
.grid-container::before {
  content: '';
  grid-column: 1 / -1;
  grid-row: 1;
  border-top: 1px solid #333;
  padding-top: 1rem;
}

/* 第二个H3上方的边框 */
.grid-container::after {
  content: '';
  grid-column: 1 / -1;
  grid-row: 3;
  border-top: 1px solid #333;
  padding-top: 1rem;
}

h3 {
  grid-column: 1;
  margin-top: 1rem;
}

p {
  grid-column: 2;
}

但这个方法只适合固定数量的内容，动态添加H3时需要手动添加新的伪元素样式，实用性较低。

内容的提问来源于stack exchange，提问作者user2991837