CSS
/* wizard*/
.wizzard ol {
list-style: none;
counter-reset: list-counter;
padding: 0;
}
.wizzard li {
counter-increment: list-counter;
margin-bottom: 20px;
position: relative;
margin: 0;
display: flex;
align-items: center;
padding: 4px;
background-color: #f1f1f1;
border-radius: 8px;
margin-bottom: 6px;
}
.wizzard .text-container {
background-color: red;
position: relative;
}
.wizzard .circle {
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #443988;
color: white;
text-align: center;
line-height: 50px;
margin-right: 10px;
}
.wizzard p {
vertical-align: top;
margin: 0;
}
.wizzard li::before {
content: “”;
position: absolute;
left: 28px;
top: 53px;
width: 1px;
height: 11px;
background-color: #443988;
}
.wizzard li::after {
content: “”;
position: absolute;
left: 28px;
top: -7px;
width: 1px;
height: 11px;
background-color:#443988;
}
.wizzard li:first-child:after {
display: none;
}
.wizzard li:last-child:before {
display: none;
}