counter-reset 主要功能是用来标识计数器的作用域的。它只能作用于选择器上，它的值包括两部分：第一部分为计数器的名字；第二部分为计数器的起始值（默认为0），counter-reset还可以同时声明多个计数器比如：

counter-reset: count 0 /*标识计数器count从1开始*/
counter-reset: count2 2 /*标识计数器count2 从3开始*/
counter-reset: count1 0 count3 0 count4 0 /*声明了三个计数器，count1，count2，count3*/

counter-increment 表明计数器实际用到的范围 。他的值也包括两部分：第一个为计数器的名字，即counter-reset设置好的名字，第二个值标识递增的值（默认为1），比如：

counter-increment: count 1 /*表明每次递增 1*/  
counter-increment：count 2 /*表明每次递增 2*/

配合伪类 before 或 after 食用

.article-container{
  margin-top: 30px;
  .article-list{
    counter-reset:num1 0;
    .article-item{
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #898989;
      a{
        font-size: 15px;
        display: block;
        width: 100%;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      a::before{
        counter-increment:num1 1;
        content: counter(num1)". ";
      }
    }
  }
}

效果：

参考：

https://www.runoob.com/cssref/pr-gen-counter-increment.html

https://www.cnblogs.com/jiajia123/p/9053587.html