How can I create a numbered accordion or FAQ list using only CSS?

Numbering sections, such as FAQs or accordion items, can enhance readability and user experience. However, modifying the HTML or Twig templates may not always be possible, especially when working with CMS-based systems. Fortunately, CSS counters allow you to generate automatic numbering using only CSS. This guide explains how CSS counters work and how to use them to number accordions, FAQs, or content blocks efficiently.

Problem: Numbered Accordion or FAQ Structure

When building accordions or FAQ sections, developers often need to prefix each question or heading with a number (like 1. Introduction, 2. Features, 3. Contact).
If your project restricts HTML or Twig modifications, adding these numbers manually becomes difficult. The challenge is to generate and display sequential numbering purely through CSS, without altering the markup.

Solution: Using CSS Counters

CSS counters act as lightweight variables that CSS maintains to track how many times an element appears. They can be initialized, incremented, and displayed dynamically using only CSS, no JavaScript or HTML edits needed.

Here’s how to do it:

This code automatically numbers each .children element inside the .parent container. You can style the numbering further using CSS properties like font-weight, color, or margin-right for customization.

Real-world Uses

• Automatically numbering FAQ or blog headings 
• Styling ordered or nested lists without <ol> 
• Creating dynamic counters for chapters, tables, or images 

Key Properties

• counter-reset → Initializes or resets a counter 
• counter-increment → Increases the counter value 
• content: counter(name) → Displays the counter value 

These properties work together to give you full control over how numbering appears across sections.

Conclusion and Next Steps

CSS counters are a powerful yet underused feature that simplifies numbering structures — all without editing templates or adding scripts. They make your UI consistent, dynamic, and easy to maintain.

If you’re looking to enhance your project with custom CSS, responsive front-end design, or performance-optimized layouts, explore our Web Development Services and let our experts craft seamless digital experiences for you.