我把CSS的黑魔法和把CSS推动到极限当作我的至爱。许多人没有意识到这是有多么的强大（特别是结合Sass）的预处理技术。这篇文章结合这两种至爱来做一些有意思的东西。当然它可能会或可能不会被你的下一个客户问，这样做有价值吗？但这样尝试才能真正的理解一种语言(当然，很多人说CSS不是一种语言)。但你也能使用纯CSS技术做一些简单的小游戏。

CSS Counters其实就是一计数器，早期在CSS中计数器仅存在于ul和ol元素。如果要使用在div这样的元素上，只能通过list-style-image或者是元素的backgroud-image来实现。在CSS2.1的规范中介绍了一种新技术，允许开发人员使用伪类:after、:before或者伪元素::after、::before给任何元素创建自动递增计数器——类似于列表中的项目符号(list-style-type)。更神奇的是，可以给这些计数器设置独特样式，让其在外观上更靓丽。

CSS生成内容对大家来说并不陌生，使用伪类（伪元素）配合“content”属性添加内容。大家可以通过这个属性给元素添加“字符串”、“图标”和“空格”等，其实除了这些之外，还可以添加计数器编码。计数器(counter-increment、counter-reset)我想有很多同学都没有接触过，因为在平时的使用中相当的少。其实早在去年Red Team在CSS3 ordered list styles（中文版本）中就分享了这两个属性。当然这里只是初步介绍了一下，并没有深入的讲解。而神飞在2009年根据CSS Content, Counter-Increment & Counter-Reset一文译了篇《CSS content, counter-increment 和 counter-reset详解》，里面详细介绍这个属性。今天D姐根据Gabriele Romanato的英文文章原名《How To Benefit From CSS Generated Content And Counters》进行翻译,再次向大家介绍了CSS如何生成内容，如何使用计数器属性。