Задача: сделать адаптивный блок с нумерацией пунктов, количество текста в пунктах разное, произвольное. Круги с числами соединены вертикальной линией, длина соединительной линии зависит от количества строк в блоке
Нумерованный список - решение
Основные стили (кроме цвета, top, left для absolute и отступов для элементов списка)
- нумерацию делаем с помощью counter
- li элемент списка display: flex(может пригодится для выравнивания текста), position: relative
- номер - (псевдоэлемент ::before), position: absolute; display: block; border-radius: 50%; padding: <значение подобрать>;
- вертикальная линия (псевдоэлемент ::after), position: absolute; display: block; width: 1px; height: calc(100% - <значение нужно подобрать>)