Step progressbar - html

Question

I'm trying to complete a step progress bar, and on the final node the complete color is not reaching to the end, the finalized color is not being applied:
#charset "UTF-8";
.container {
width: 100%;
}
.multi-steps > li.is-active ~ li:before, .multi-steps > li.is-active:before {
content: counter(stepNum);
font-family: inherit;
font-weight: 700;
}
.multi-steps > li.is-active ~ li:after, .multi-steps > li.is-active:after {
background-color: #ededed;
}
.multi-steps {
margin: 0;
border-top: 1px solid red;
display: flex;
padding: 0;
}
.multi-steps > li {
flex: 1;
position: relative;
text-align: center;
display: flex;
counter-increment: stepNum;
flex-direction: column;
align-items: flex-start;
color: tomato;
}
.multi-steps > li:before {
content: "";
content: "✓;";
content: "𐀃";
content: "𐀄";
content: "✓";
width: 36px;
height: 36px;
line-height: 32px;
display: block;
/*margin: 0 auto 4px;*/
background-color: #fff;
text-align: center;
font-weight: bold;
border-width: 2px;
border-style: solid;
border-color: tomato;
border-radius: 50%;
}
.multi-steps > li:after {
content: "";
position: absolute;
height: 2px;
width: 100%;
background-color: tomato;
top: 16px;
left: 0;
right: 0;
z-index: -1;
}
.multi-steps > li:last-child {
/*&:after{*/
flex-grow: 0;
align-items: flex-end;
white-space: nowrap;
/*display: none;*/
/*}*/
}
.multi-steps > li.is-active:before {
background-color: #fff;
border-color: tomato;
}
.multi-steps > li.is-active ~ li {
color: #808080;
}
.multi-steps > li.is-active ~ li:before {
background-color: #ededed;
border-color: #ededed;
}
<div class="container">
<br /><br />
<ul class="list-unstyled multi-steps">
<li>
<div>Start</div>
</li>
<li>
<div>Should be aligned center</div>
</li>
<li>
<div>Should be centered too</div>
</li>
<li class="is-active">
<div>Finish step belevie or not</div>
</li>
</ul>
</div>
on this code I should center the titles of bot nodes and also the "completed" color should reach until the last node. For more detail please refer to my sniped code with sass

Answer 1

The problem is in your line:
.multi-steps > li.is-active ~ li:after, .multi-steps > li.is-active:after {
background-color: #ededed;
}
Which overrides the colour. Simply removing this will add the colour back in:
#charset "UTF-8";
.container {
width: 100%;
}
.multi-steps > li.is-active ~ li:before, .multi-steps > li.is-active:before {
content: counter(stepNum);
font-family: inherit;
font-weight: 700;
}
.multi-steps {
margin: 0;
border-top: 1px solid red;
display: flex;
padding: 0;
}
.multi-steps > li {
flex: 1;
position: relative;
text-align: center;
display: flex;
counter-increment: stepNum;
flex-direction: column;
align-items: flex-start;
color: tomato;
}
.multi-steps > li:before {
content: "";
content: "✓;";
content: "𐀃";
content: "𐀄";
content: "✓";
width: 36px;
height: 36px;
line-height: 32px;
display: block;
/*margin: 0 auto 4px;*/
background-color: #fff;
text-align: center;
font-weight: bold;
border-width: 2px;
border-style: solid;
border-color: tomato;
border-radius: 50%;
}
.multi-steps > li:after {
content: "";
position: absolute;
height: 2px;
width: 100%;
background-color: tomato;
top: 16px;
left: 0;
right: 0;
z-index: -1;
}
.multi-steps > li:last-child {
/*&:after{*/
flex-grow: 0;
align-items: flex-end;
white-space: nowrap;
/*display: none;*/
/*}*/
}
.multi-steps > li.is-active:before {
background-color: #fff;
border-color: tomato;
}
.multi-steps > li.is-active ~ li {
color: #808080;
}
.multi-steps > li.is-active ~ li:before {
background-color: #ededed;
border-color: #ededed;
}
<div class="container">
<br /><br />
<ul class="list-unstyled multi-steps">
<li>
<div>Start</div>
</li>
<li>
<div>Should be aligned center</div>
</li>
<li>
<div>Should be centered too</div>
</li>
<li class="is-active">
<div>Finish step belevie or not</div>
</li>
</ul>
</div>