[Извините за мой плохой английский]
Я должен показать маршрут автобуса.
- Остановки должны быть сгруппированы по названию города.
- Вертикальная линия должнасоедините все стоп-круги.
Результат должен быть таким, как на этом рисунке.
Это моя попытка.https://jsfiddle.net/xgL98h0w/2/ (код React, но это не имеет значения)
У меня с этим две проблемы:
Названия городов (зависят от ихдлина) не выровнены по границе.Например, см. «Длинное название города».
Я не знаю, как соединить круги с вертикальной линией.Я пытался добавить ::after псевдоэлемент для каждого круга, но мне не удалось заставить его работать.Учитывая, что на кружках отображается flex, псевдоэлемент ::after не выравнивается должным образом.
Спасибо за любую помощь!