垂直分隔线作为带有 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

删除 divider 元素并通过将 grid-column: 2 和 grid-row: 1 添加到此 伪元素 使 content:after 成为您的 divider（强制它进入中间列）。

请看下面的演示：

.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>

如果您希望在 每个 block 之后有一个 分隔符，那么您可以在每个 block 之间添加一个 grid-gap 并放置一个 absolutely 在该空间中定位 pseudo 元素 - 参见下面的演示：

.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>

Answer 2

一种方法

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

}

.content{
  display: grid;
  grid-template-columns: 75px  55px;
  margin:auto;
  grid-gap: 20px;

}

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

.block:not(:last-child):after {
  position: absolute;
  content: '';
  left: calc(100% + 9px) ;
  color:red;
  width: 2px;
  height: 80%;
  top: 10%;
  background-color: black;
}

.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="block">
        test
      </div>

      </div>
  </div>

Answer 3

以下是对@kukkuz 回答的改进。

@kukkuz 的回答没有响应，因为他的right 属性值以px 而不是vw 表示。如果最终用户减小或增加其浏览器的宽度，您的垂直分隔符将以不同的速率移动，而不是调整网格布局的列大小。它们不会在视觉上同步。结果：您的分隔符会溢出列的内容。

解决方案：@kukkuz 的right 属性使用vw 而不是px。