垂直分隔线作为 CSS 网格的伪元素

Question

我正在使用 CSS 网格。我需要在两个 DIV 之间有一个垂直分隔符。但是，垂直分隔符需要小于实际 DIV 的高度，因此我不认为可以使用 DIV 的边框。

.content-container {
  display: grid;
  width: 100%;
  text-align: center;
}

.content {
  display: grid;
  grid-template-columns: 750px 21px 550px;
  margin: auto;
}

.block {
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #eee;
  height: 100px;
}

.divider {
  content: '';
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
  border-left: 1px solid black;
}

<div class="content-container">
  <div class="content">
    <div class="block">test</div>
    <div class="divider"></div>
    <div class="block">test</div>
  </div>
</div>

这有效，我可以使用 margin-top和margin-bottom来控制分隔线的高度。

理想情况下，我希望这个分隔符是一个 CSS 伪元素，但我无法以任何方式让它工作。这是否可以达到预期的结果，或者我必须坚持使用 HTML 代码中的实际元素。

Answer 1

删除分隔符元素，并通过向该伪元素添加和来content:after创建分隔符（强制其进入中间列）。grid-column: 2grid-row: 1

请参阅下面的演示：

.content-container {
  display: grid;
  width: 100%;
  text-align: center;
}

.content {
  display: grid;
  grid-template-columns: 750px 21px 550px;
  margin: auto;
}

.block {
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #eee;
  height: 100px;
}

.content:after { /* Now a pseudo element */
  content: '';
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
  border-left: 1px solid black;
  grid-column: 2; /* ADDED */
  grid-row: 1; /* ADDED */
}

<div class="content-container">
  <div class="content">
    <div class="block">test</div>
    <div class="block">test</div>
  </div>
</div>

如果你想在每个之后有一个分隔符，那么你可以在每个之间有一个分隔符，并在该空间中放置一个绝对定位的伪元素 - 请参见下面的演示： blockgrid-gapblock

.content-container {
  display: grid;
  width: 100%;
  text-align: center;
}

.content {
  display: grid;
  grid-template-columns: repeat(3, 150px); /* CHANGED */
  margin: auto;
  grid-gap: 20px; /* ADDED */
}

.block {
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #eee;
  height: 100px;
  position: relative; /* ADDED */
}

.block:after { /* ADDED */
  content: '';
  position: absolute;
  border-left: 1px solid black;
  right: -10px; /* adjust this */
  height: 80%; /* adjust this */
}

.block:last-child:after { /* ADDED */
  display: none; /* Hide the divider for the last block */
}

<div class="content-container">
  <div class="content">
    <div class="block">test</div>
    <div class="block">test</div>
    <div class="block">test</div>
  </div>
</div>