Точки в линию между блоками в центре от одного к другому, как реализовать?

Question

[Антон Вебсайтовский]

Сделал блоки, этапы, между 1-2-3, должны идти точки, я сделал точки, но они идут не совсем между, а хотелось сделать чтобы точки были видны между. На скринах показываю как хочу реализовать.

Рабочая схема тут:
https://codepen.io/AXOT/pen/BagOMme

У меня вышло так:


А хочу сделать так:

Answer 1

[Ivan Ustûžanin]

как-то так, идея теоретически верная, но недоведённая до конца

Comments

[Антон Вебсайтовский]

Кстати там лишний див , это я опыты проводил и забыл убрать.
Надо мне больше познавать, width еще юзнаю, а вот другое топ и лефт да еще и с calc.

width: calc(100% - 40px - 10px * 2);
  top: calc(40px / 2 - 8px / 2);
  left: calc(50% + 40px / 2 + 10px);

[Антон Вебсайтовский]

Появился вопрос теперь, как первый ряд точке теперь поймать и изменить цвет допустим на оранжевый, ну типа мы прошли класс, как-то через класс active, который присваиваем.

Так не сработало:
.progress-step::after.active {
border-bottom: 8px dotted #ff5c03;

Так тож нет
.progress-step.active .progress-step::after {
border-bottom: 8px dotted #ff5c03;
}
}

[Ivan Ustûžanin]

Антон Вебсайтовский, лишние div-ы убрал, а calc() достаточно примитивный, его основное достоинство, что можно проценты с другими единицами измерения сочитать

[Ivan Ustûžanin]

Антон Вебсайтовский, тоже первая идея правильная, но тут последовательность селекторов важна, обновил пэн

[Антон Вебсайтовский]

IvanU7n, а вот оно что, хотел же тож так попробовать ) ну ладно ))

.progress-step.active::after {
  border-bottom: 8px dotted #ff5c03;
}

Answer 2

[Виталий Першин]

Comments

[Антон Вебсайтовский]

Пригодиться, оно еще и адаптивное.
Упрощу данный код, а то жесть сколько дивов лишних и классов.

[Виталий Першин]

Антон Вебсайтовский, Все лишнее у вас в голове