Vertical Divider As Pseudo Element With CSS Grids - html

Question

I am using CSS Grids. I have a requirement to have a vertical separator between two DIVs. However, the vertical separator needs to be smaller than the height of the actual DIVs, so I don't believe I can use the DIV's border.
.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>
This works and I'm able to use the margin-top and margin-bottom to control the divider's height.
Ideally, I'd prefer this divider to be a CSS pseudo element but I can't get this working in any way. Is this possible to achieve the desired result or must I stick with an actual element in the HTML code.

Answer 1

Remove the divider element and make content:after your divider by adding grid-column: 2 and grid-row: 1 to this pseudo element (forces it into the middle column).
See demo below:
.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>
If you want a divider after each block then you can have a grid-gap between each block and put an absolutely positioned pseudo element in that space - see demo below:
.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

one way to do it
.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

The following is an amelioration of #kukkuz's answer.
#kukkuz's answer is not responsive because his right property's value's expressed in px instead of vw. If the final user decreases or increases his browser's width, your vertical separators will move at a different rate than the grid layout's columns are resized. They won't be visually synchronized. Results: your separators would overflow your columns' content.
Solution: use vw instead of px for the right property of #kukkuz.