Best way to implement these trailing lines in css?

Not sure what these are called, but here's an image for reference:

What I'm trying to do is add this line that drops downward to the next dot for every mapped item except the last one.

Right now what I'm doing is add a downward line for every item, then checking if it's the last item, in which case I don't add the downward line. However, I was wondering if there's a way to do it in plain css without having to check it in js.

HTML & JSX:

<div className='items'> {items.map((item, index)=>{ return ( <div className='item'> <div className='circle'> {index===items.length-1 ? undefined : <span></span>} </div> {item} </div> ) })} </div>

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; }