How to create branches for blocks using pseudo elements? - html

Question

I am trying to create a simple structure of blocks using only HTML and CSS. In the center I have one main block from which other blocks branch off to the left and right.
All of them should be connected by lines to other blocks, but how to create these lines is a question...
I have some code:
.chapter {
display: flex;
align-items: center;
justify-content: center;
max-width: 900px;
margin: 0 auto;
padding: 0;
gap: 2rem;
}
.main {
position: relative;
padding: 1rem 2rem;
background-color: rgb(224, 224, 224);
border: 1px solid black;
}
.main::before,
.main::after {
content: "";
position: absolute;
top: 50%;
display: block;
width: 1rem;
height: 1px;
background-color: #000;
}
.main::before {
left: -1rem;
}
.main::after {
right: -1rem;
}
.right,
.left {
list-style-type: none;
margin: 0;
padding: 0;
}
.elem {
position: relative;
padding: 0.3rem 2rem;
background-color: rgb(224, 224, 224);
border: 1px solid black;
margin-bottom: 0.5rem;
}
.elem:last-child {
margin-bottom: 0px;
}
.elem::after {
content: "";
position: absolute;
top: 50%;
display: block;
width: 1rem;
height: 1px;
background-color: #000;
}
.left>.elem::after {
right: -1rem;
}
.right>.elem::after {
left: -1rem;
}
<div class="chapter">
<ul class="left">
<li class="elem">elem</li>
<li class="elem">elem</li>
<li class="elem">elem</li>
<li class="elem">elem</li>
<li class="elem">elem</li>
</ul>
<div class="main">root</div>
<ul class="right">
<li class="elem">elem</li>
<li class="elem">elem</li>
<li class="elem">elem</li>
<li class="elem">elem</li>
<li class="elem">elem</li>
</ul>
</div>
And what I get and what I want:
Is it possible to achieve this arrangement of lines?
Or perhaps there is another more elegant way to do it?