Необычный выпадающий список?

Question

[Yuki Developer]

Может кто сталкивался с таким видом списка (напротив каждой точки - пункт списка)? Сейчас это border-left + after-элементы (кружочки). Как сделать такую границу "резиновой", т.е. чтобы при разных по кол-ву слов в списках тянулась (имела разные расстояния м\д пунктами (кружочками), если это необходимо)?

Answer 1

[Сергей Горячев]

https://jsfiddle.net/6y1fjc37/ так (точка всегда по центру)
https://jsfiddle.net/6y1fjc37/1/ или так (точка фиксированная)
https://jsfiddle.net/6y1fjc37/3/ и так (скрываем части полоски)

Answer 2

[Сергей]

Ну как раз бордер-лефт и решает твою задачу -)
Каждому li задаешь высоту строки и через before делаешь кругляши.

Comments

[Yuki Developer]

Это да) НО, если последний пункт многострочный по объёму, то у последнего от кружка появляется палочка, которой быть не должно..Сейчас она частично скрыта after-элементом, привязанным ко всему списку(ul), может есть вариант через скрипт, как-то контролировать его(::after) высоту?

[Сергей]

Горбатенко Екатерина: Можно попробовать у последнего пункта убрать бордер и сделать картинкой кружок с палочкой.... либо у последнего пункта добавить второй псевдо элемент который будет по цвету как фон и спозиционирван на бордер.