CSS3计数器

ul,ol自带计数功能,但我们无法定义样式。使用counter-reset来自定义更自由的计数器。

示例效果

  • 第一

  • 第二

  • 第三

HTML

  • 第一

  • 第二

  • 第三

CSS3

/* 定义计数器num,从0开始增长,计数器必须放置在计数元素的容器上。 */
#counter{counter-reset:num 0;}
/* 计数器自增长以num为准 */
#counter i::before{content:counter(num);counter-increment:num;}

JOE