CSS var变量使用方便简单，有时候可能需要这些变量能够同时作为字符在页面中呈现，我们想到的是使用
::before/::after伪元素配合content属性，但是，把CSS变量直接作为content属性值是没有任何效果的。
/* 无效 */
.bar::before {
content: var(--percent);
}
虽然content属性本身不支持变量，但是counter-reset属性后面的计数器初始值是支持的
counter-reset: apple 0值分为2个部分，第一部分为计数器的名字；第二部分为计数器的起始值（默认为0，可以同时声明多个计数器。
先简单介绍一下css counter计数器属性
css3增加了counter属性，可以实现任何元素的计数作用，需要配合其他css属性一起才能有效果
counter-reset:标识计数器的作用域的，值分为2个部分，第一部分为计数器的名字；第二部分为计数器的起始值（默认为0）,可以为负数也可以是小数，不过就是IE和FireFox都不识别，认为是不合法数值，直接无视，当作默认值0来处理，Chrome把任何小数都是向下取整，
counter-reset还可以同时声明多个计数器比如counter-reset: count 0
counter-reset: count1 0 count2 0 count3 0 /*声明了三个计数器，count1，count2，count3*/counter-increment:就是“计数器-递增”的意思,其值为counter-reset的1个或多个关键字。后面可以跟随数字，表示每次计数的变化值。如果缺省，则使用默认变化值1（方便起见，下面的都使用默认值做说明）。可在父元素递增 ，也可在子自素递增也可以同时递增
每一次计数的counter-reset唯一，counter-increment1次，增加1次计数值。
counter()/counters():这是个方法，不是属性。类似CSS3中才calc()计算。这里作用很单纯显示计数。不过名称、用法有多个：counter(name,style) counter(name,string) counter(name,string,style)style参数还有有些名堂的。其支持的关键字值就是list-style-type支持的那些值。作用是，我们递增递减可以不一定是数字，还可以是英文字母，或者罗马文等。
counter还支持级联。也就是一个content属性值可以有多个counter()方法。
counters():看似值多了个字母s, 但表意大变身。counters几乎可以说是嵌套计数的代名词。一个元素，如果设置了counter-increment, 但是其display的属性值是none或者含有hidden属性（针对支持浏览器），则此计数值是不会增加的。而visibility:hidden以及其他声明不会有此现象。
言归正传 如何呈现：借助CSS计数器呈现CSS var变量值
/* 有效 */
/* 有效 */
.bar::before {
counter-reset: progress var(--percent);
content: counter(progress);
}
demo
<div> <p>计数器</p> <div> <div class="applect"> <span class="cspan">🍎</span> <span class="cspan">🍎</span> <span class="cspan">🍎</span> <span class="cspan">🍎</span> <span class="cspan">🍎</span> </div> 我有<span class="counter"></span>个苹果 </div> <p>进度条</p> <div class="bar" style="--percent: 20;"></div> <div class="bar" style="--percent: 50;"></div> </div> .bar { height: 20px; width: 300px; background-color: #f5f5f5; margin: 5px 0 10px; } .bar::before { counter-reset: progress var(--percent); content: counter(progress) '%'; display: block; width: calc(300px * var(--percent) / 100); font-size: 12px; color: #fff; background-color: #ff4081; text-align: right; white-space: nowrap; overflow: hidden; } .applect{ counter-reset: apple 0; } .cspan{ counter-increment: apple 1; } .cspan::before,.counter::before { content: counter(apple); }
counters兼容性
可以看出css counter的兼容基本都可以，可以利用counter属性结合var变量属性实现基数并在页面中呈现变量。
