Меню навигации с пунктирной линией и точками ⇐ CSS

[Anonymous]

Я пытаюсь создать навигационное меню, в котором под каждым шагом будет точка, а между шагами — пунктирная линия.
HTML

Код: Выделить всё

[list]

[*]StepOne

[*]StepTwo
[*]AnotherStep
[*]Someotherstep
[/list]

CSS

Код: Выделить всё

.dot {
position:absolute;
height: 5px;
width: 5px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
top: 33px;
}

.dot-active {
background-color: #fff;
}

.center {
text-align: center;
}

.breadcrumb-menu {
padding: 10px 20px;
background-color: #1E1E1E;
width: 488px;
}

.breadcrumb-steps {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
justify-content: space-between;
}

.breadcrumb-steps .step {
color: #6c757d;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
padding: 5px 15px;
position: relative;
cursor: pointer;
text-align: center;
}

.breadcrumb-steps .step::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
width: 130px;
height: 1px;
background: repeating-linear-gradient( to right, #6c757d, #6c757d 2px, transparent 4px, transparent 6px );
display: block;
}

.breadcrumb-steps .step.active {
color: #fff;
}

.breadcrumb-steps .step:hover {
color: #ffffff;
}

Вот что я получил на данный момент: https://jsfiddle.net/gr61hes7/7/
Как я мог сделать так, чтобы у меня был точка под каждым шагом, как я сделал для первого, и как мне сделать так, чтобы пунктирная линия точно соответствовала размеру между каждой точкой?
В моем примере пунктирная линия выходит далеко за середину последнего шага, где должно быть быть dot.
Не могли бы вы дать мне несколько советов о том, как к этому следует подойти? Спасибо.
Если быть точнее, узор должен быть таким:
Шаг, второй шаг, третий шаг, четвертый
точка ------------точка--------------точка------------точка
и точки должны быть центрированы под каждым шагом с помощью пунктирная линия, начинающаяся от одной точки к другой

Подробнее здесь: https://stackoverflow.com/questions/793 ... e-and-dots