css3 计数器

css3计时器，根据个数自动增加。就不需要浪费一张图片资源了。
在此记下，方便后期翻阅

counter-increment属性递增一个或多个计数器值。
counter-increment属性通常用于counter-reset属性和content属性。

可能出现的值:

none：没有计数器将递增
id number：id 定义将增加计数的选择器、id 或 class。number 定义增量。number 可以是正数、零或者负数。
inherit：指定counter-increment属性的值，应该从父元素继承

用法：

<style type="text/css">
ol {
  counter-reset: section;                /* 为每个ol元素创建新的计数器实例 */
  list-style-type: none;
}
li:before {
  counter-increment: section;            /* 只增加计数器的当前实例 */
  content: counters(section, ".") " ";   /* 为所有计数器实例增加以“.”分隔的值 */
}
</style>    

<ol>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>

实现的效果