شمارنده‌ها (Counters)

استفاده از CSS Counters برای شمارش و شماره‌گذاری خودکار عناصر

شمارنده CSS چیست؟

CSS Counter امکان شمارش و شماره‌گذاری خودکار عناصر را فراهم می‌کند — بدون نیاز به JavaScript.

سه ویژگی اصلی

ویژگیتوضیح
counter-resetراه‌اندازی شمارنده
counter-incrementافزایش شمارنده
counter()نمایش مقدار

مثال پایه

/* راه‌اندازی شمارنده */
    body {
        counter-reset: section;
    }
    
    /* افزایش و نمایش */
    h2::before {
        counter-increment: section;
        content: "بخش " counter(section) ": ";
        color: #3498db;
        font-weight: bold;
    }

شمارنده تودرتو

ol {
        counter-reset: item;
        list-style: none;
    }
    
    ol > li::before {
        counter-increment: item;
        content: counters(item, ".");
        background: #3498db;
        color: white;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط