Numbered CMS list. Surely this is easy?

Design help CMS
1

I’d like to create a auto-numbered CMS list. Like this:

1 First item
2 Second item
3 Third item
4 4th item
etc

But how?

Simply creating two lists side by side doesn’t work (static list beside CMS list), as a CMS item may have a long title and thus need a second line, and breaking the formatting.

As a grid, maybe?

Horrible feeling this is very easy, and I’m just not seeing it.

Thanks!

Charles

My failed attempt so far:
https://preview.webflow.com/preview/business-age?utm_medium=preview_link&utm_source=designer&utm_content=business-age&preview=81c2839ae19f111964594acea2c3acf5&pageId=61631591dc6297d79180e66f&workflow=preview

2

You can use custom CSS to add counters to an element. See counter() - CSS: Cascading Style Sheets | MDN (mozilla.org)

3

I came up with a messy solution.

Five div blocks on top of each other.
Inside each one, a div block for the number, and next to it a fresh CMS collection each time set to show 1 item.
The first CMS collection starts at 1, and limited to 1.
The second CMS collection starts at 2, and limited to 1.
etc.
So I have five CMS collections stacked on top of each other, which collectively look like a single collection.
Looks fine. Works well.

Inelegant? Er…yep.

[I’m sure Jeff’s solution is far better, but I am sticking to zero custom code in Webflow]