Use pseudoclasses to create a CSS progress bar / stepper - html

Question

I am building a stepper, trying to achieve this:
I've built the following, but the problem is the color overflows on the right side of the bar.
.onboarding-steps {
display: flex;
}
.onboarding-steps-container {
background-color: #393D66;
border-top: 1px solid #AEAEAE;
border-bottom: 1px solid #AEAEAE;
background-position: -50% 0;
}
.onboarding-step.active {
color: white;
}
.onboarding-step.active ~ .onboarding-step {
background-color: #fff;
}
.container-fluid {
max-width: 94px;
margin-right: auto;
margin-left: auto;
}
.list-reset {
list-style: none;
padding: 0;
margin: 0;
}
.onboarding-step {
-ms-flex-positive: 1;
flex-grow: 1;
padding: 1.8rem 1rem 1.8rem 1.5rem;
}
<nav class="onboarding-steps-container">
<div class="container-fluid">
<ul class="list-reset clearfix onboarding-steps">
<li class="onboarding-step">
1
</li>
<li class="onboarding-step active">
2
</li>
<li class="onboarding-step">
3
</li>
<li class="onboarding-step">
4
</li>
</ul>
</div>
</nav>
I have also tried a variation by using a pseudoselector as such:
li.onboarding-step.active:before {
background-color: #f9f9f9;
content: '';
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 100%;
position: absolute;
}
.onboarding-steps-container {
position: relative;
}
in that case the color goes on the entire bar.

Answer 1

Here is an example.
.breadcrumb {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding-right: 35px;
}
.breadcrumb li {
text-decoration: none;
padding: 10px;
position: relative;
cursor: pointer;
flex: auto;
border: 1px solid red;
}
.breadcrumb li span {
font-size: 11px;
display: inline-block;
width: 16px;
line-height: 16px;
border-radius: 50%;
background-color: white;
vertical-align: middle;
text-align: center;
margin-left: calc(100% - 8px);
}
.breadcrumb li:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid #393D66;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li:before {
content: "";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 2px;
left: 100%;
z-index: 1;
}
li {
background-color: #393D66;
}
li:first-child {} li.active ~ li {
background-color: #f5f5f5;
}
li.active ~ li:after {
border-left-color: #f5f5f5;
}
li.active ~ li:before {
border-left-color: #d5d5d5;
}
li.active ~ li span {
background-color: #c5c5c5;
color: white;
}
<div class="stepper">
<ul class="breadcrumb">
<li><span>1</span>
</li>
<li><span>2</span>
</li>
<li class="active"><span>3</span>
</li>
<li><span>4</span>
</li>
<li><span>5</span>
</li>
</ul>
</div>

Answer 2

I'm not sure if you're looking for an answer which alters the <li> elements before and after the active <li> and the first <li> but here's a solution for that if you need one. Otherwise pretty much same stuff as Pugazh's answer.
html,
body {
background-color: #ccc;
}
.onboarding-steps {
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
}
.onboarding-steps li {
float: left;
}
.onboarding-steps li span {
color: white;
text-decoration: none;
padding: 10px 20px 10px 45px;
background: #393D66;
position: relative;
display: block;
float: left;
}
.onboarding-steps li span i {
display: block;
padding: 0 5px;
width: 5px;
height: 15px;
font-size: 10px;
background-color: white;
color: grey;
border-radius: 50%;
border: 1px solid grey;
}
.onboarding-steps li:first-child span {
padding: 10px 50px 10px 65px;
}
.onboarding-steps li.active ~ li span {
color: black;
background: #ffffff;
}
.onboarding-steps li span:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid #393D66;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.onboarding-steps li.active ~ li span:after {
border-left: 30px solid #ffffff;
}
.onboarding-steps li span:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.onboarding-steps li.active ~ li span:before {
border-left: 30px solid grey;
}
<ul class="onboarding-steps">
<li>
<span><i>1</i></span>
</li>
<li class="active">
<span><i>2</i></span>
</li>
<li>
<span><i>3</i></span>
</li>
<li>
<span><i>4</i></span>
</li>
</ul>
EDIT:
Here's another example. I even made the items clickable so that you can see how the background reacts with the <li> with active class.
var elements = document.querySelectorAll(".list-item");
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener("click", function() {
for (var i = 0; i < elements.length; i++) {
elements[i].classList.remove("active");
}
this.classList.add("active");
});
}
html,
body {
background-color: #ccc;
}
.onboarding-container {
background: #FFFFFF;
border: 2px solid black;
padding: 30px;
}
.onboarding-steps {
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 0;
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
display: flex;
}
.onboarding-steps li {
position: relative;
background: #393D66;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
padding: 10px 30px 10px 40px;
flex: 1;
transition: flex 300ms linear 0s, background 100ms linear 0s;
}
.onboarding-steps li.active {
flex: 0 0 200px;
transition: flex 300ms linear 0s, background 100ms linear 0s;
}
.onboarding-steps li:first-child {
padding: 10px 30px 10px 10px;
}
.onboarding-steps li:last-child {
margin-right: -1px;
}
.onboarding-steps li span {
display: block;
padding: 0 5px;
width: 5px;
height: 15px;
font-size: 10px;
background-color: white;
color: grey;
border-radius: 50%;
border: 1px solid grey;
}
.onboarding-steps li:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #393D66;
position: absolute;
top: 50%;
margin-top: -20px;
left: 100%;
margin-left: -2px;
z-index: 2;
transition: border-left 100ms linear 0s;
}
.onboarding-steps li:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid white;
position: absolute;
top: 50%;
margin-top: -20px;
margin-left: -1px;
left: 100%;
z-index: 1;
transition: border-left 100ms linear 0s;
}
.onboarding-steps li:last-child:after {
margin-left: -22px;
}
.onboarding-steps li:last-child:before {
margin-left: -21px;
border-top: 20px solid #ffffff;
border-bottom: 20px solid #ffffff;
}
.onboarding-steps li.active ~ li {
background: #ffffff;
}
.onboarding-steps li.active ~ li:after {
border-left: 20px solid #ffffff;
transition: border-left 100ms linear 0s;
}
.onboarding-steps li.active ~ li:before {
border-left: 20px solid grey;
transition: border-left 100ms linear 0s;
}
<div class="onboarding-container">
<ul class="onboarding-steps">
<li class="list-item active">
<span>1</span>
</li>
<li class="list-item">
<span>2</span>
</li>
<li class="list-item">
<span>3</span>
</li>
<li class="list-item">
<span>4</span>
</li>
</ul>
</div>
EDIT 2:
Based on your comment I made one more example and this is probably the closest you can get with just using CSS. Hopefully this will help you. Please do open it in fullscreen to see it working.
var elements = document.querySelectorAll(".list-item");
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener("click", function() {
for (var i = 0; i < elements.length; i++) {
elements[i].classList.remove("active");
}
this.classList.add("active");
});
}
html,
body {
background-color: #ccc;
}
* {
box-sizing: border-box;
}
.onboarding-container {
width: 100%;
background: #FFFFFF;
border: 2px solid black;
padding: 20px 0px;
}
.onboarding-container-inner {
position: relative;
width: 100%;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
background: transparent;
z-index: 1;
overflow: hidden;
}
.onboarding-steps:before {
content: "";
display: inline-block;
width: 40%;
background: #393D66;
left: 0;
top: 0;
height: 100%;
position: absolute;
}
.onboarding-steps:after {
content: "";
display: inline-block;
width: 40%;
background: #ffffff;
right: 0;
top: 0;
height: 100%;
position: absolute;
z-index: -1;
}
.onboarding-steps {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 0;
list-style: none;
font: 18px Helvetica, Arial, Sans-Serif;
display: flex;
}
.onboarding-steps li {
position: relative;
background: #393D66;
padding: 10px 30px 10px 40px;
flex: 1;
transition: flex 300ms linear 0s, background 100ms linear 0s;
}
.onboarding-steps li.active {
//flex: 0 0 200px;
transition: flex 300ms linear 0s, background 100ms linear 0s;
}
.onboarding-steps li:first-child {
padding: 10px 30px 10px 10px;
}
.onboarding-steps li:last-child {
margin-right: -1px;
}
.onboarding-steps li span {
display: block;
padding: 0 4px;
width: 15px;
height: 15px;
font-size: 10px;
background-color: white;
color: grey;
border-radius: 50%;
border: 1px solid grey;
}
.onboarding-steps li:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #393D66;
position: absolute;
top: 50%;
margin-top: -20px;
left: 100%;
margin-left: -2px;
z-index: 2;
transition: border-left 100ms linear 0s;
}
.onboarding-steps li:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid white;
position: absolute;
top: 50%;
margin-top: -20px;
margin-left: -1px;
left: 100%;
z-index: 1;
transition: border-left 100ms linear 0s;
}
.onboarding-steps li:last-child:after {
margin-left: -22px;
}
.onboarding-steps li:last-child:before {
margin-left: -21px;
border-top: 20px solid #ffffff;
border-bottom: 20px solid #ffffff;
}
.onboarding-steps li.active:last-child:before {
border-top: 20px solid #393D66;
border-bottom: 20px solid #393D66;
}
.onboarding-steps li.active ~ li {
background: #ffffff;
}
.onboarding-steps li.active ~ li:after {
border-left: 20px solid #ffffff;
transition: border-left 100ms linear 0s;
}
.onboarding-steps li.active ~ li:before {
border-left: 20px solid grey;
transition: border-left 100ms linear 0s;
}
.onboarding-steps li.active:last-child:before {
content: "";
display: inline-block;
background: #393D66;
position: absolute;
right: 0;
top: 0;
width: 2500px;
height: 100%;
z-index: 1;
border-top: 0;
border-left: 0;
border-bottom: 0;
margin-top: 0;
transition: width 100ms linear 0s;
}
<div class="onboarding-container">
<div class="onboarding-container-inner">
<ul class="onboarding-steps">
<li class="list-item active">
<span>1</span>
</li>
<li class="list-item">
<span>2</span>
</li>
<li class="list-item">
<span>3</span>
</li>
<li class="list-item">
<span>4</span>
</li>
</ul>
</div>
</div>