Лучший способ реализовать эти конечные строки в CSS? ⇐ CSS

[Anonymous]

Не знаю, как они называются, но вот изображение для справки:


Я пытаюсь добавить эту линию, которая опускается вниз до следующей точки для каждого сопоставленного элемента, кроме последнего.
Сейчас то, что я делаю добавить нисходящую линию для каждого элемента, а затем проверить, является ли это последним элементом, и в этом случае я не добавляю нисходящую линию. Однако мне было интересно, есть ли способ сделать это с помощью простого CSS без необходимости проверять это в js.
HTML и JSX:

{items.map((item, index)=>{
return (


{index===items.length-1 ? undefined : }

{item}

)
})}


CSS:
.item {
position: relative;
color: black;
}
.circle {
content: '';
border-radius: 50%;
margin: auto;
position: absolute;
top: 0;
left: -30px;
bottom: 0;
width: 11px;
height: 11px;
background-color: black;
}

.circle > span {
margin: auto;
position: absolute;
left: 0;
right: 0;
bottom: -15px;
width: 1px;
height: 15px;
background-color: red;
}


Подробнее здесь: https://stackoverflow.com/questions/799 ... nes-in-css