CSS Counter

CSS Counter یک ویژگی داخلی هست که به شما اجازه میده شماره‌گذاری خودکار عناصر رو بدون نیاز به جاوااسکریپت انجام بدید.
یعنی می‌تونید برای لیست‌ها، عناوین، یا هر المانی یک شمارنده درست کنید.

📌 دستورات مهم در Counter

1. counter-reset

برای ایجاد یا ریست کردن شمارنده استفاده میشه.

body {
  counter-reset: section;
}

2. counter-increment

برای افزایش مقدار شمارنده به کار میره.

h2 {
  counter-increment: section;
}

3. content: counter(name)

برای نمایش مقدار شمارنده در ::before یا ::after استفاده میشه.

h2::before {
  content: "بخش " counter(section) ": ";
}

✅ مثال ساده: شماره‌گذاری تیترها

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>CSS Counter Example</title>
  <style>
    body {
      counter-reset: section; /* شمارنده شروع از صفر */
    }
    h2 {
      counter-increment: section; /* هر h2 یکی اضافه کنه */
    }
    h2::before {
      content: "بخش " counter(section) ": "; /* نمایش شماره */
      color: coral;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h2>مقدمه</h2>
  <h2>نصب</h2>
  <h2>استفاده</h2>
</body>
</html>

🔢 خروجی:

  • بخش 1: مقدمه

  • بخش 2: نصب

  • بخش 3: استفاده

📌 مثال پیشرفته‌تر: زیر‌بخش‌ها

شمارنده‌های تو در تو (nested counters):

body {
  counter-reset: section;
}

h2 {
  counter-increment: section;
  counter-reset: subsection; /* برای زیرشاخه‌ها */
}

h2::before {
  content: counter(section) ". ";
}

h3 {
  counter-increment: subsection;
}

h3::before {
  content: counter(section) "." counter(subsection) " ";
}