Меню навигации с пунктирной линией и точками [дубликат] ⇐ Html

[Anonymous]

Я пытаюсь создать навигационное меню, в котором под каждым шагом будет точка, а между шагами — пунктирная линия.
Как я могу сделать так, чтобы под каждым шагом была точка, например Я сделал это для первого, и как мне сделать так, чтобы пунктирная линия точно соответствовала размеру между каждой точкой?
В моем примере пунктирная линия выходит далеко за пределы середины последнего шага, где это должно быть dot
Если точнее, шаблон должен быть:

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

Stepone         steptwo        stepthree      stepfour

dot------------dot--------------dot------------dot

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

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

.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;
}< /code>

[list]

[*]StepOne


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

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