Numbered Accordion Counters

What You'll Create

Numbered counters that appear before each accordion item title. Displays numbers like 01, 02, 03 automatically using CSS counter-increment.

The Problem It Solves

Squarespace's native accordion block doesn't include numbering. When you want to show numbered FAQs, steps, or organized content with visual sequence indicators, you need CSS counters.

Perfect For

FAQ sections, Step-by-step guides, Numbered lists, Process documentation, Pricing tiers

What Makes This Different

This technique uses CSS counter-reset and counter-increment with decimal-leading-zero formatting. Numbers appear before each accordion title with customizable styling. Section-scoped to avoid affecting other accordion blocks.

Details

• Section Type: Fluid & Classic

• Code Type: CSS

• Prerequisites: Accordion block with section selector

• Toolkit Title: Counters for Accordion Block

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support