دنیای CSS3 دنیایی بسیار وسیع و جالب است، حجم بسیار زیادی از امکانات در نظر گرفته شده است که هنوز هم مرورگرها بسیاری از آنها را بطور کامل پشتیبانی نمی کنند.

اگر تا بحال فکر می کردید که برای ایجاد یک شمارنده برای محتوای خود یا باید از تگ `ol` استفاده کنید یا سمت سرور شمارنده خود را ایجاد کنید، بدانید و آگاه باشید که این روشی سی اس اسی هم برای این کار وجود دارد. :)

در سی اس اس سه دستور `counter-increment` - `counter-reset` و `counter` تعریف شده اند که با استفاده از آنها می توان براحتی شمارنده های مخلتف ایجاد کرد. همانطور که از اسامی آنها نیز پیداست `counter-reset` شمارنده را صفر می کند، و `counter-increment` شمارنده را افزایش می دهد و در نهایت `counter` مقدار فعلی شمارنده را برمی گرداند. در مثال زیر می توانید نحوه استفاده آنها را مشاهده کنید.

```
``` ``` body { counter-reset: my-awesome-counter; } section { counter-increment: my-awesome-counter; } section:before { content: counter(my-awesome-counter); } ```

شماره تگ های `

` بترتیب برابر ۱ و ۲ و ۳ و ۴ خواهند بود. همچنین در قسمت `section:before` می توانید نوع شمارنده خود را انتخاب کنید، برای مثال کد زیر شمارنده به اعداد لاتین نمایش داده می شود.

``` section:before { content: counter(my-awesome-counter, upper-roman); } ```

دمو

See the Pen sDoac by Chris Coyier (@chriscoyier) on CodePen.

وضعیت پشتیبانی مرورگرها

Chrome Safari Firefox Opera IE Android iOS
2+ 3.1+ Any 9.2+ 8+ TBD TBD