Progress bar doesn't get active at step 1-CodePudding

I'm very new into coding and I wanted to add a progress bar on my website. But when I want to make the step1 "active", it's the step2 that gets active (and when I make the step 2 active, it's the step 3 that gets active and so on)

            <div id="fh5co-work">
                <div >
                    <div >
            <div >
                <div >
                     <ul >
                        <li >Step 1</li>
                        <li>Step 2</li>
                        <li>Step 3</li>
                        <li>Step 4</li>
                        <li>Step 5</li>
                     </ul>
                 </div>
            </div>

Here's the css code in the bootstrap.css:

.container{
  width: 140%;
  position: absolute;
  z-index: 1;
}
.progressbar li{
  float: left;
  width: 20%;
  position: relative;
  text-align: center;
}

.progressbar li:before{
  content:"1";
  width: 30px;
  height: 30px;
  border: 2px solid #bebebe;
  display: block;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  line-height: 27px;
  background: white;
  color: #bebebe;
  text-align: center;
  font-weight: bold;
}

.progressbar{
  counter-reset: step;
}
.progressbar li:before{
  content:counter(step);
  counter-increment: step;
  width: 30px;
  height: 30px;
  border: 2px solid #bebebe;
  display: block;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  line-height: 27px;
  background: white;
  color: #bebebe;
  text-align: center;
  font-weight: bold;
}

.progressbar li:after{
  content: '';
  position: absolute;
  width:100%;
  height: 3px;
  background: #37606f;
  top: 15px;
  left: -50%;
  z-index: -1;
}

.progressbar li:first-child:after{
  content: none;
  }

  .progressbar li.active   li:after{
    background: #37606f;
   }
   .progressbar li.active   li:before{
   border-color: #37606f;
   background: #37606f;
   color: white
   }

What can I do to make it work?

CodePudding user response：

When I changed the style definition .progressbar li.active li:before in css to .progressbar li.active:before, the problem went away.

.container{
  width: 140%;
  position: absolute;
  z-index: 1;
}

.progressbar li{
  float: left;
  width: 20%;
  position: relative;
  text-align: center;
}

.progressbar li:before{
  content:"1";
  width: 30px;
  height: 30px;
  border: 2px solid #bebebe;
  display: block;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  line-height: 27px;
  background: white;
  color: #bebebe;
  text-align: center;
  font-weight: bold;
}

.progressbar{
  counter-reset: step;
}
.progressbar li:before{
  content:counter(step);
  counter-increment: step;
  width: 30px;
  height: 30px;
  border: 2px solid #bebebe;
  display: block;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  line-height: 27px;
  background: white;
  color: #bebebe;
  text-align: center;
  font-weight: bold;
}

.progressbar li:after{
  content: '';
  position: absolute;
  width:100%;
  height: 3px;
  background: #37606f;
  top: 15px;
  left: -50%;
  z-index: -1;
}

.progressbar li:first-child:after{
  content: none;
}

.progressbar li.active   li:after{
  background: #37606f;
 }
 
.progressbar li.active:before{
   border-color: #37606f;
   background: #37606f;
   color: white
 }

<div id="fh5co-work">
  <div >
    <div >
      <div >
        <div >
           <ul >
              <li >Step 1</li>
              <li>Step 2</li>
              <li>Step 3</li>
              <li>Step 4</li>
              <li>Step 5</li>
           </ul>
         </div>
      </div>
    </div>
  </div>
</div>