CSS計數器不是什么新鮮玩意了，早在10年春暖花開的時候，我寫的“CSS content內容生成技術以及應用”一文就要提到（見下圖），不過當時是作為其中一員介紹。就像例行的溜新同事一樣，雖然黑如焦炭的我在自我介紹的時候給新同事留下了深刻印象，但由于介紹的同事茫茫多，我只是其中一員。很自然，個把月之后，我就會被無情的淡忘，除了那依稀的面龐，因為畢竟長得還算比較抽象。

然而，CSS計數器的斗量顯然不是短短幾句介紹能夠顯露的，所謂人不可貌相。就像我，說不定某年某月，當年像驢子一樣被溜的新同事終于腦袋被門夾了，想起了我的音容笑貌，找我來尋求幫助呢！

我最近就遇到這樣的情況。

給部門同事做點果汁系統的時候，由于果汁店經常會有水果因果品爆發被N多靚妹相中而缺貨，因此，每人可以選擇三種自由搭配的飲品。于是，就有了第1選擇、第2選擇、第3選擇……

本來我是純文字寫在標簽里的。好重好累，感覺不會再愛了！此時，突然眼前一道白光，午休時間結束，阿姨把辦公室的燈打開了。這恍如隔世的念閃讓我突然想起了當年大明湖畔的“CSS計數器”。想當年，移動web還是草莽，IE六七興風作浪。這誘人的技能就算昭告于世也是受制于兼容大環境而腰斬的命。

但是現在不一樣了，我們趕上了一個更好的時代：英語老師從事傳統工業生產錘子，影視明星舍身取義集體赴監獄拍攝大片；以前那些受制于IE6/IE7不兼容而不見天日的高級CSS/JS特性也紛紛走到了臺前，CSS計數器就是其中一員。于是，我拿起我平時釣魚挖蚯蚓的小鍬去挖CSS計數器的墳。雖然目前網上已有一些介紹CSS計數器的文章，但大多不夠全面，案例不夠精彩，查閱也不方便。就像是租的房子，雖然也能擋風遮雨，但裝修風格不是自己的，還寄人籬下，保不準房東借個東風就把我吹走了。所以啊，有必要自己留一手，去挖個墳然后建個房。

對于純潔的技術圈而言，挖墳并不可恥。我們重新去挖掘過去的那些文章知識，好像一個考古學家去挖掘塵封的歷史、消失的文明一般，是件很有價值的事情。所以，如果大家對挖掘考古感興趣，就跟我一起去挖挖挖~~

CSS計數器只能跟content屬性在一起的時候才有作用，而content屬性貌似專門用在before/after偽元素上的。于是，就有了，“計數器↔偽元素↔content屬性”的鐵三角關系。

CSS計數就跟我們軍訓報數一樣的！現在，讓我們的靜靜地閉上眼睛，讓思緒飛到青蔥的大學，那個炎熱的夏日，那個寬廣的軍訓場地，你…想到了什么？——“隔壁班的那個妹子長得好水靈好可愛我好喜歡”。