Horizontal CSS Wizard Navigation - html

Question

I am trying to build up a horizontal css wizard navigation with a rounded css circle and text on each step. I am stuck on 1 point need to get ride on border from right side. Tried almost all steps. Attaching the code.
Attaching the screenshot of issue as well.
error image
ul {
text-align: justify;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
}
ul:before {
content: '';
width: 96%;
border: 2px solid #21a2d1;
position: absolute;
top: 1em;
margin-top: -6px;
z-index: -1;
margin-left: 16px;
}
.active:after {
content: '';
width: 100%;
border: 2px solid #b7b7b7;
position: absolute;
top: 1em;
margin-top: -6px;
z-index: -1;
}
ul:after {
content: '';
display: inline-block;
width: 100%;
}
li {
width: 1.5em;
height: 1.5em;
text-align: center;
line-height: 1.7em;
border-radius: 50%;
background: #21a2d1;
margin: 0 1em;
display: inline-block;
}
.marker-number {
font-size: 14px;
}
li.active {
background: #04497b;
}
.active ~ li {
background: #b7b7b7;
}
span.marker-text {
color: #7d7d7d;
font-size: 12px;
line-height: 16px;
width: 70px;
display: block;
margin-left: -21px;
font-family: Arial;
}
<ul>
<li><span class="marker-number"> </span> <span class="marker-text">Select Car</span></li>
<li><span class="marker-number"> </span> <span class="marker-text">Questions</span></li>
<li class="active"><span class="marker-number"> </span> <span class="marker-text">Problems</span></li>
<li><span class="marker-number"> </span> <span class="marker-text">Inspection</span></li>
<li><span class="marker-number"> </span> <span class="marker-text">Solution</span></li>
</ul>

Answer 1

Here is a sample, using flexbox, with a minimal markup, and for the marker the ::before pseudo and the line the ::after pseudo (starting from the 2:nd position)
ul.wizard, ul.wizard li {
margin: 0;
padding: 0;
display: flex;
width: 100%;
}
ul.wizard {
counter-reset: num;
}
ul.wizard li {
flex-direction: column;
align-items: center;
position: relative;
}
ul.wizard li::before {
counter-increment: num;
content: counter(num);
width: 1.5em;
height: 1.5em;
text-align: center;
line-height: 1.5em;
border-radius: 50%;
background: #21a2d1;
}
ul.wizard li ~ li::after {
content: '';
position: absolute;
width: 100%;
right: 50%;
height: 4px;
background-color: #21a2d1;
top: calc(.75em - 2px);
z-index: -1;
}
ul.wizard li.active::before {
background: #04497b;
color: white;
}
ul.wizard .active ~ li::before,
ul.wizard .active ~ li::after {
background: #b7b7b7;
}
ul.wizard span {
color: #7d7d7d;
font-size: 12px;
font-family: Arial;
}
/* updated sample */
ul.wizard li.completed::before { /* number and circle */
background: red;
color: white;
}
ul.wizard li.completed span { /* text */
color: red;
}
ul.wizard li.completed + li::after { /* line after circle */
background: red;
}
ul.wizard li.completed::after { /* line before circle */
background: red;
}
<ul class="wizard">
<li>
<span>Select Car</span>
</li>
<li class="completed">
<span>Questions</span>
</li>
<li class="active">
<span>Problems</span>
</li>
<li>
<span>Inspection</span>
</li>
<li>
<span>Solution</span>
</li>
</ul>
This can also be done without flexbox, if you need to target older browsers
ul.wizard, ul.wizard li {
margin: 0;
padding: 0;
}
ul.wizard {
counter-reset: num;
}
ul.wizard li {
list-style-type: none;
float: left;
width: 20%;
position: relative;
text-align: center;
}
ul.wizard li::before {
display: block;
counter-increment: num;
content: counter(num);
width: 1.5em;
height: 1.5em;
text-align: center;
line-height: 1.5em;
border-radius: 50%;
background: #21a2d1;
margin: 0 auto;
}
ul.wizard li ~ li::after {
content: '';
position: absolute;
width: 100%;
right: 50%;
height: 4px;
background-color: #21a2d1;
top: calc(.75em - 2px);
z-index: -1;
}
ul.wizard li.active::before {
background: #04497b;
color: white;
}
ul.wizard .active ~ li::before,
ul.wizard .active ~ li::after {
background: #b7b7b7;
}
ul.wizard span {
display: inline-block;
color: #7d7d7d;
font-size: 12px;
font-family: Arial;
}
<ul class="wizard">
<li>
<span>Select Car</span>
</li>
<li>
<span>Questions</span>
</li>
<li class="active">
<span>Problems</span>
</li>
<li>
<span>Inspection</span>
</li>
<li>
<span>Solution</span>
</li>
</ul>

Answer 2

Reduce width of pseudo element :befor to 90% and :after to 45% but you have to write it always different width percentages as per the activated li tag and as per screen size. I think If you modify your markup a little bit which will help you more and make the complications less.
============================================================
Changed markup as you required and few tweaks in css
ul {
text-align: justify;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
display: inline-flex;
justify-content: space-around;
width: 100%;
}
li {
position: relative;
width: 20%;
text-align: center;
display: inline;
padding-bottom: 20px;
}
.marker-number {
width: 1.5em;
height: 1.5em;
text-align: center;
line-height: 1.7em;
border-radius: 50%;
background: #21a2d1;
display: inline-block;
}
.marker-line {
position: absolute;
width: 100%;
height: 4px;
background-color: #21a2d1;
top: 10px;
}
li.active span.marker-number,
li.active span.marker-line {
background: #04497b;
}
.active ~ li span.marker-number,
.active ~ li span.marker-line {
background: #b7b7b7;
}
span.marker-text {
color: #7d7d7d;
font-size: 12px;
line-height: -15px;
font-family: Arial;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
<ul>
<li>
<span class="marker-number"> </span>
<span class="marker-line"></span>
<span class="marker-text">Select Car</span>
</li>
<li>
<span class="marker-number"> </span>
<span class="marker-line"></span>
<span class="marker-text">Questions</span>
</li>
<li class="active">
<span class="marker-number"> </span>
<span class="marker-line"></span>
<span class="marker-text">Problems</span>
</li>
<li>
<span class="marker-number"> </span>
<span class="marker-line"></span>
<span class="marker-text">Inspection</span>
</li>
<li>
<span class="marker-number"> </span>
<span class="marker-text">Solution</span>
</li>
</ul>