CSS - counter-increment
===
>:point_right: <font color="blue">緣由</font>
>
>不需要在HTML裡多寫標籤放入數字
>藉由css-counter-increment自動生成數字

---

### 對子元素增加計數器的值

<div class="box-g">
  <div class="box">項目一</div>
  <div class="box">項目二</div>
  <div class="box">項目三</div>
</div>

.box-g .box{
  // 自定義名稱
  counter-increment: step;
  vertical-align: middle;
}
.box-g .box::before{
  // 帶入名稱
  content: counter(step);
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  background: #000;
  text-align: center;
  color: #fff;
  font-size: 16px;
}

---

:star: 完成後如下範例：