Как добавить фиксированные шарики?

Question

[Serqwezxc]

Есть верстка, https://codepen.io/SergeyYmsk/pen/WNjQRWJ. На полоске, по дизайну, размещены белые шарики, но если добавить какой-нибудь текст в карточку, они будут смещаться, такая же беда и с адаптивом, хотя это немного другой вопрос. Как можно добавить эти кружки так, что бы они не смещались?

Answer 1

[Ankhena]

Расстояние между блоками и чертой одинаковое, чего бы им съезжать?
https://jsfiddle.net/0k6a2bgs/

Comments

[Serqwezxc]

если в карточку добавить текст, они съедут. Надо было мне сразу это показать, тупонул, вот пример
https://codepen.io/SergeyYmsk/pen/WNjQRWJ

[Ankhena]

Serqwezxc, в моем примере в карточках специально разное количество текста

[FeST1VaL]

Serqwezxc, так а вам принципиально указывать в процентах?) может статично для нижних -71px, а при ховере -68px

[Serqwezxc]

нет, всё отлично, большое спасибо

[Serqwezxc]

FeST1VaL, извините, у меня вот еще такой вопрос: а как быть с таким же блоком но вертикальным, при этом что бы он адаптировался

[Ankhena]

Serqwezxc, аналогично

Что именно вас смущает?

[Serqwezxc]

если блоки таким образом, марджины не позволят еще сузить блоки

[Ankhena]

Serqwezxc, перестраивайте в один столбик, когда не влезают

И вы можете задавать размеры в vw

[Serqwezxc]

спасибо

[Ankhena]

Serqwezxc, кстати, я очень не люблю лишние обертки, но в данном случае будет проще, если:
- содержимое li обернуть в div,
- псевдо-шарик делать и позиционировать от li
- сдвиг при наведении делать для внутреннего div

[Serqwezxc]

Ankhena, помогло, спасибо