Как сверстать такую связь между элементами под Bootstrap?

Question

[alexeeey_kuznetsov]

Как можно реализовать такую черную полоску с кружками связывающая 4 строки. Дизайн выполнялся под сетку Bootstrap 4, поэтому интересна реализация конкретно под нее. Но это скорее всего по методам реализации не будет иметь разницы, что BS, что без него.
Жду помощи. Заранее спасибо за ответ!

Answer 1

[Anton Filippov]

Чтобы нарисовать эту полоску нужно использовать псевдоэлементы и селекторы чётности.
::before - кружочки с бордерами
::after- линии
:nth-child(odd/even) чтобы задавать угол линий
:nth-child(1,2,3,4,5, ...)нагенерировать разные цвета, если они просто всегда идут в одном порядке. Если зависят от родителя - currentColor, если должен быть рандом или что-то другое - уже понадобится Javascript.