.icon-box-counter-wrapper { counter-reset: icon-counter; /* Initialize counter */ } .icon-box:before { counter-increment: icon-counter; /* Increment counter */ content: counter(icon-counter); /* Display counter */ display: inline-block; background: #0062AD; color: white; width: 25px; height: 25px; border-radius: 50%; text-align: center; line-height: 25px; margin-right: 10px; font-size: 14px; font-weight: bold;

If your icon boxes are in a list or sequential container, CSS can auto-number them. Steps: Your first icon box content Your second icon box content

If you don’t want to code, use: Example with Elementor: ✅ Pros: No coding needed.❌ Cons: Adds extra plugin dependency.