Вертикальный разделитель как псевдоэлемент с 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 и сделайте content:after ваш divider , добавив grid-column: 2 и grid-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>

Если вы хотите делитель после каждый block, тогда вы можете иметь grid-gap между каждымblock и поместите абсолютно позиционированный псевдо элемент в это пространство - см. Демонстрацию ниже:

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