【原创】利用css计数器属性(counter)实现列表序号自动增加（含源码下载）

先发图片（list列表的前面的序号自增的方法，就是我这篇文章要分享的），避免各位看官不知道是否感兴趣，浪费了您的宝贵时间。如果您已经了解了这个方法，可以快速离开~ 

【本例源码下载】

既然没有走，那么进入实例之前，我们先了解一下 计数器属性(counter)

计数器属性(counter)允许我们在CSS中创建和管理计数器。计数器是一个自定义的变量，我们可以使用它来跟踪页面上的元素数量，并根据需要在文档中显示。

创建计数器

我们可以使用counter-reset属性来创建计数器，并使用counter-increment属性来增加计数器的值。例如：

ol {
    counter-reset: section;
}

li::before {
    counter-increment: section;
    content: counter(section) . ;
}

上述代码将在一个有序列表中为每个列表项增加一个计数器，并在每个列表项前显示计数器的值。

使用计数器

我们可以将计数器的值插入到content属性中，用于显示在元素的内容上。例如：

h2::before {
    counter-increment: chapter;
    content: 第 counter(chapter) 章 ;
}

上述代码将在每个元素的前面添加一个章节编号，将其设置为自动增加的计数器。

计数器的实际应用

接下来，看一下我这个实际的案例：

图中的序号就是使用 counter计数器来实现的，下面看一下页面布局代码：

<ul class="list">
  <li><a href="###">CSS如何设置背景模糊周边有白色光晕(解决方案)</a></li>
  <li><a href="###">CSS设置水平垂直居中的7种方法</a></li>
  <li><a href="###">CSS实现渐变式圆点加载动画</a></li>
  <li><a href="###">使用CSS实现五星围绕圆心旋转的效果</a></li>
  <li><a href="###">CSS设置style属性的3种方法</a></li>
  <li><a href="###">CSS中隐藏元素的常见5种方法</a></li>
  <li><a href="###">CSS实现三栏布局的四种方法</a></li>
  <li><a href="###">利用css计数器属性(counter)实现列表序号自动增加</a></li>
  <li><a href="###">使用CSS完成视差滚动效果</a></li>
  <li><a href="###">css中position:sticky 粘性定位详解</a></li>
  <li><a href="###">标签UL和li的CSS样式详解</a></li>
</ul>

可以看到，我并没有在li的前面增加任何的布局。接下来看看样式表是如何实现的：

/* 带序号排序的UL列表 */

.list{ 
  background: #f1f1f1;
  border-radius: 15px;
  padding: 15px 25px;
  clear: both;
  width: 300px;
  height: auto;
  display: block;
  position: fixed;  
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);  
}
.list li{
  display:inline-block;
  list-style:none;  
  font-size:14px; 
  width:280px; 
  height:20px;  
  margin: 4px 0px;
  counter-increment: mycounter;  /* 创建了一个自增的计数器 */
  line-height: 20px;
  color: #666;
  overflow: hidden;

}
.list li:before{ 
  content:counter(mycounter);  /* 把 计数器函数 插入到 li的伪类：before的content 属性里，使用“:before 递增列表序号样式 */
  color:#333; 
  margin-right:8px; 
  display:inline-block; 
  width:20px; 
  height:20px;
  -moz-border-radius: 3px;  
  -webkit-border-radius: 3px;  
  border-radius: 3px; 
  -khtml-border-radius:3px; 
  text-align:center;
  background:#e3e3e3;
  font-size: 14px; 
  line-height: 20px;
  display: inline-block;
  float:left;
}
/* 为了实现设计美观，给前三个li设置了不同背景色 */
.list li:nth-child(1):before{
  background:#CC0033; 
  color: #fff;
}
.list li:nth-child(2):before{
  background:#FF9933; 
  color: #fff;
}
.list li:nth-child(3):before{
  background:#FFCC33; 
  color: #fff;
}
/* 定义序号1·2·3的before伪类样式 */

.list li a{  
  color: #666;
  text-decoration: none;
  white-space: nowrap; /*文本不换行，这样超出一行的部分被截取，显示为“ ...”  */ 
  transition: all .3s;
  margin-left: 0px;  
}
.list li a:hover{
  width: 100%; 
  margin-left: 8px; /* 给鼠标滑过增加一个小动画，让交互更有趣 */
  font-weight: bold; 
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /*文本不换行，这样超出一行的部分被截取，显示为“ ...”  */ 
  transition: all .3s;
}

好了，上述代码就完美实现了利用css计数器属性(counter)实现列表序号自动增加的效果。是不是很简单？【本例源码下载】

希望我的分享对你有所帮助，欢迎评论，欢迎点赞，欢迎交流！