Fancy drop down list?

Maybe someone faced with such a list (in each dot - point list)? Now it is border-left + after-elements (circles). How to make the border, "rubber", ie, to different count words in the lists were drawn (had different distances m\d points (circles), if necessary)?
2769faf35b4542589af47d18e35eae81.png
July 12th 19 at 17:31
2 answers
July 12th 19 at 17:33
Solution
https://jsfiddle.net/6y1fjc37/ (the dot always in the center)
https://jsfiddle.net/6y1fjc37/1/ or so (point fixed)
https://jsfiddle.net/6y1fjc37/3/ and so (hiding part of the strip)
July 12th 19 at 17:35
Well, just the border left and solve your task)
Each li set line-height and using before make kruglyashi.
Yes) BUT if the last item of a multiline by volume, the latter from the circle comes the stick, which should be gone. Now it is partially hidden after-element that is bound to the whole list(ul) may have the option of using a script to control it(::after) height? - Casandra_Kutch commented on July 12th 19 at 17:38
: You can try the last paragraph to remove the border and make the picture a circle with a stick.... or the last paragraph, add the second pseudo element that will be the same color as the background and pozitsioniruem on the border. - chester_Zboncak commented on July 12th 19 at 17:41

Find more questions by tags CSSHTMLjQueryDesign