javascript - How to make first li value 0 and then increment by 2 using css counter?

Question

I am trying to make a steps progress bar. When i use the css counter it starts from 2 and goes like 2 4 6 8 10 12. i want it to be 0 2 4 6 8 10 instead. i tried changing the counter reset to 0 but that changes it to be 0 on all elements.

Here is my code

<div>
  <ul className="progressbar">
    <li id="0" onClick={ ()=> {this.changeColor(0)}} className=""></li>
    <li id="2" onClick={ ()=> {this.changeColor(2)}} className=""></li>
    <li id="4" onClick={ ()=> {this.changeColor(4)}} className=""></li>
    <li id="6" onClick={ ()=> {this.changeColor(6)}} className=""></li>
    <li id="8" onClick={ ()=> {this.changeColor(8)}} className=""></li>
    <li id="10" onClick={ ()=> {this.changeColor(10)}} className=""></li>
  </ul>
</div>

CSS for it:

.container {
  width: 600px;
  margin: 100px auto; 
}
.progressbar {
  counter-reset: step;
}
.progressbar li {
  list-style-type: none;
  width: 15%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  color: #7d7d7d;
}
.progressbar li:before {
  width: 30px;
  height: 30px;
  content: counter(step);
  counter-increment: step 2;
  line-height: 30px;
  border: 2px solid #7d7d7d;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
}
.progressbar li:after {
  width: 100%;
  height: 2px;
  content: '';
  position: absolute;
  background-color: #7d7d7d;
  top: 15px;
  left: -50%;
  z-index: -1;
}
.progressbar li:first-child:after {
  content: none;
}
.progressbar li.active:before {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin-top: -4px;
  background-color: #FF5A66;
  border-color: #FF5A66;
  color: white;
}

Method to change the className of an element to highlight onClick

changeColor = (id) => {
  var value1 = document.getElementById("0");
  var value2 = document.getElementById("2");
  var value3 = document.getElementById("4");
  var value4 = document.getElementById("6");
  var value5 = document.getElementById("8");
  var value6 = document.getElementById("10");

  if (id == 0) {
    console.log(id);
    value1.className = "active";
    value2.className = "";
    value3.className = "";
    value4.className = "";
    value5.className = "";
    value6.className = "";
    this.setState({
      imageToShow: "images/icons/blob/good-blob.svg",
      textToShow: "I'm good"
    });
  }
}

标签： javascripthtmlcssreactjsjsx

Answer 1

当您在不说明值（第二个参数）的情况下重置计数器时，默认值为 0。但是，计数器增量会立即应用，因此如果计数器的初始值为0，则一个元素（li::before在您的代码中）都会显示计数器的增量有一个值2而不是0。如果您需要一个元素的计数器0，请将初始计数器值设置为 - 设置值（-2在您的情况下）。

在您的代码中 - 将计数器重置为-2，第一个增量会将其提升为0：

.progressbar {
  counter-reset: step -2;
}

示例（HTML 而不是 React）：

.progressbar {
  counter-reset: step -2;
}

.progressbar li {
  list-style-type: none;
  width: 15%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  color: #7d7d7d;
}

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

.progressbar li::after {
  width: 100%;
  height: 2px;
  content: '';
  position: absolute;
  background-color: #7d7d7d;
  top: 15px;
  left: -50%;
  z-index: -1;
}

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

.progressbar li.active::before {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin-top: -4px;
  background-color: #FF5A66;
  border-color: #FF5A66;
  color: white;
}

<div>
  <ul class="progressbar">
    <li id="0"></li>
    <li id="2"></li>
    <li id="4"></li>
    <li id="6"></li>
    <li id="8"></li>
    <li id="10"></li>
  </ul>
</div>