Как правильно нарисовать линии между элементами LI? ⇐ Html

[Anonymous]

Я строю компонент шагового уровня для отображения шагов, используя элемент UL горизонтальным образом, и у меня есть следующий код:


body {
margin: 0;
}

.page-content {
width: 100%;
margin: 0 auto;
display: flex;
display: -webkit-flex;
justify-content: center;
-o-justify-content: center;
-ms-justify-content: center;
-moz-justify-content: center;
-webkit-justify-content: center;
align-items: center;
-o-align-items: center;
-ms-align-items: center;
-moz-align-items: center;
-webkit-align-items: center;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
}

.wizard-v4-content {
background: #fff;
width: 80%;
margin: 40px 20px;
font-family: 'Roboto', sans-serif;
position: relative;
display: flex;
display: -webkit-flex;
}

.wizard-v4-content .wizard-v4-form {
width: 100%;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 20px;
}

.wizard-v4-form .wizard-v4-header {
text-align: left;
padding: 10px 0 5px;
}

.wizard-v4-form .wizard-v4-header .heading {
margin: 0;
padding: 20px 0 20px;
}

.wizard-v4-form .wizard-v4-header p {
margin: 0;
}

.wizard-v4-container {
width: 100%;
z-index: -1;
}

.wizard-v4-progressbar {
width: 90%;
padding: 0;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}

.wizard-v4-progressbar li {
list-style-type: none;
width: 10%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
color: darkgray;
}

.wizard-v4-progressbar li:after {
width: calc(100% - 24px);
height: 2px;
content: "";
position: absolute;
background-color: darkgray;
top: 11px;
left: -50%;
display: block;
z-index: 1;
}

.wizard-v4-progressbar li:before {
width: 24px;
height: 24px;
content: "";
line-height: 30px;
border: 2px solid darkgray;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
z-index: 2;
}

.wizard-v4-progressbar li:first-child:after {
content: none;
}

.wizard-v4-progressbar li.wizard-v4-active {
font-size: 90%;
font-weight: bold;
color: black;
}

.wizard-v4-progressbar li.wizard-v4-active:before {
width: 28px;
height: 28px;
color: green;
border-color: green;
background-color: green;
margin-top: -2px;
}

.wizard-v4-progressbar li.wizard-v4-checked {
color: black;
}

.wizard-v4-progressbar li.wizard-v4-checked::before {
font-family: "Font Awesome 5 Free";
font-weight: bold;
content: "\f058";
color: green;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
border: none;
}

.wizard-v4-progressbar li.wizard-v4-active + li:after {
background-color: darkgray;
}

/* Responsive */
@media screen and (max-width: 1200px) {
}

@media screen and (max-width: 992px) {
}

@media screen and (max-width: 768px) {
}

@media screen and (max-width: 576px) {
}< /code>
[*] href="https://cdn.jsdelivr.net/npm/bootstrap@ ... ap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous">

• Step 1
• Step 2
• Step 3
• Step 4
• Step 5

< /code>
< /div>
< /div>
< /p>
Однако у меня есть 2 проблемы: < /p>
< ol>
[*] В этом примере отображаются строки, но они не подключаются к элементам li < /code> < /li>
В реальном проекте строки не являются отображается.

Как я могу решить эту проблему?


Подробнее здесь: https://stackoverflow.com/questions/794 ... i-elements