شرح صفوف ومحتوى الفقرة
كلما صادف المتصفح عنصراً يطابق counter-increment: section فإنه يضيف 1 افتراضياً إلى أقرب نطاق نشط للعداد section. ويمكنك تمرير أي خطوة موجبة أو سالبة؛ فالقيمة counter-increment: score 10 تعد بالعشرات، بينما يتيح الجمع بين counter-reset: countdown 4 على الأب وcounter-increment: countdown -1 على الأبناء بناء عد تنازلي أنيق 3, 2, 1.
انتبه كذلك لتأثير حالات الإخفاء: فالعنصر المخفي عبر display: none لا ينشئ صندوقاً في التخطيط ولذلك لا يهيئ العداد ولا يزيده، بينما يظل العنصر ذو visibility: hidden حاضراً في التخطيط فيزيد العداد كالمعتاد.
CSS
.guide { counter-reset: sec; }
.guide-h2 { counter-increment: sec; counter-reset: sub; }
.guide-h2::before { content: counter(sec) ". "; }
.guide-h3 { counter-increment: sub; }
.guide-h3::before {
content: counter(sec) "." counter(sub) " ";
}