با استفاده از CSS Counters، یک صفحه HTML شامل چند بخش (section) و زیر‌بخش (subsection) بسازید که هر بخش و زیر‌بخش به‌صورت خودکار شماره‌گذاری شده و شماره‌ها با pseudo-element ::before نمایش داده شوند.

برای حل این مسئله از ویژگی‌های counter-reset و counter-increment و تابع content: counter(...) در pseudo-elementها استفاده کنید: روی کانتینر اصلی counter-reset: section; بگذارید، در هر section از counter-increment: section استفاده کنید و در هر subsecion از counter-increment: subsection و در قانون section مقدار subsection را ریست کنید (مثلاً section { counter-reset: subsection; }). در ::before شماره‌ها را با content: counter(section) "." counter(subsection) قرار دهید و با خواص CSS مثل display، margin و font-weight ظاهر عددها را تنظیم کنید. به‌عنوان نکته، از تگ‌های معنایی مثل و / استفاده کنید و برای دسترسی بهتر محتوای عددی را در متن یا aria-label نیز در نظر بگیرید.