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

删除 divider 元素并通过添加 grid-column: 2 和 [=16= 使 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>

如果你想要一个 divider 在 each block 之后你可以在每个 grid-gap 之间有一个 grid-gap =17=] 并在 space 中放置一个 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 3

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

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

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

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

Vertical Divider As Pseudo Element With CSS Grids

html

css

pseudo-element

css-grid