Как сделать резиновый элемент?

Question

[SeriousAnonymous]

Прошу натолкнуть на идею создания данного блока - вернее создания линий, которые будут резиновыми при уменьшении экрана.


Сделал флекс контейнер и три элемента внутри и пытаюсь через after сделать линию.
Но при уменьшении экрана линии выходят за границы данных кругов, как можно поправить.
Спасибо.

Comments

[Артем Золин]

Показывайте код

[SeriousAnonymous]

Артем Золин,
https://codepen.io/by_ultra/pen/WNOVzEa

Answer 1

[Ankhena]

Да просто ширина псевдо 100%. Зачем вам разбивать на несколько полосок?
Либо можно вообще заменить псевдо на фон с полоской, сделанной градиентом.
Если хочется в несколько, то вам поможет flex-grow для псевдо.

Comments

[SeriousAnonymous]

Спасибо.

Answer 2

[nonconformiste]

Фишка в том что размеры блоков и :after должны быть относительны, а ширина всего блока фактической ( хотя можно и относительной ).