I need assistance with adding an image or icon above each step in the progress bar. I attempted to insert an image tag, but it ended up next to 'step 1', which is not the desired outcome.
.progressbar {
counter-reset: step;
}
.progressbar li {
list-style-type: none;
float: left;
width: 33.33%;
position: relative;
text-align: center;
}
.progressbar li:before {
content: counter(step);
counter-increment: step;
width: 30px;
height: 30px;
border: 1px solid #ddd;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
}
.progressbar li:after {
content: '';
position: absolute;
width: 100%;
height: 3px;
background-color: #ddd;
top: 15px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content:none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: #3aac5d;
background: #3aac5d;
color: white
}
.progressbar li.active + li:after {
background-color: green;
}
.container {
padding: 1px 1px 1px 1px;
border: 0px solid lightgrey;
border-radius: 3px;
}<div class="container">
<ul class="progressbar">
<li class="active"> step 1</li>
<li>step 2</li>
<li>step 3</li>
</ul>
</div>I want the image/icon to be positioned just above each circle, like a location icon on step 1 and a shopping cart on step 2.
UPDATE: I am aiming for a design similar to the one shown in this tutorial video on YouTube.