I was trying to make a menu step by step, that's where I came from. My intention was to click on the first circle, turn on step 1 in green and move on to the next step, making the line between them green (as already in the code). And so on up to step 3. Any ideas on how to do this ?? Javascript?
.container{
width: 100%;
}
.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;
line-height: 30px;
border: 1px solid #ddd;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 58%;
background-color: white;
}
.progressbar li:after{
content: '';
position: absolute;
width: 100%;
height: 1px;
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: green;
}
.progressbar li.active + li:after{
background-color: green;
}<div class="container">
<ul class="progressbar">
<li class="active">Passo 1</li>
<li>Passo 2</li>
<li>Passo 3</li>
</ul>
</div>