Меню хлебной крошки с пунктирной линией и точками [дублировать] ⇐ CSS

[Anonymous]

Я пытаюсь создать меню из хлебного крово Я сделал для первого, и как сделать линию Dasshed, чтобы быть эксплуатационным размером между каждой точкой? должен быть точкой < /p>
, чтобы быть более точным, шаблон должен быть: < /p>

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

Stepone         steptwo        stepthree      stepfour

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

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

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

[list]

[*]StepOne


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

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