Loading video...

Video Failed to Load

Go Home

don't sleep on using CSS counters for counting your content 👨‍🍳 section::before { content: counters(section,'',pad)'.'counters(content,'',pad) } /* 01.04 */ @​counter-style pad { system: extends decimal; pad: 2 '0'; } check it! 👇

95,627 views • 1 year ago •via X (Twitter)

10 Comments

jhey ▲🐻🎈's profile picture
jhey ▲🐻🎈1 year ago

this is kinda hard to get a video of so might be worth a little breakdown demo 🤔 but using CSS to count your content means you don't have to bake numbered headings into your content swap the content order? no issue pad the numbers? no problem, use a counter style 🤙

jhey ▲🐻🎈's profile picture
jhey ▲🐻🎈1 year ago

had some questions about this one so made a breakdown demo 🤙 should help explain things 🧑‍🍳

Better Bedder's profile picture
Better Bedder1 year ago

As seen on Shark Tank: Never lift your heavy mattress to change sheets. Use this headband that wraps around your bed.

Cory Simmons's profile picture
Cory Simmons1 year ago

I always suspected you could do some crazy ish with counters but never really dug into it.

jhey ▲🐻🎈's profile picture
jhey ▲🐻🎈1 year ago

gonna spin up a clearer demo because I realise this is quite hard to follow 😅

artTILT's profile picture
artTILT1 year ago

Clean.

CG's profile picture
CG1 year ago

this slaps. when everyone is going very like rounded i like the sharp edges and the 1 in the corner. looks dope

🇫🇷Guillaume Tell - Fullstack dev🇫🇷 τ/acc's profile picture
🇫🇷Guillaume Tell - Fullstack dev🇫🇷 τ/acc1 year ago

I understand nothing 🤣 wtf is that css property 😱

jhey ▲🐻🎈's profile picture
jhey ▲🐻🎈1 year ago

jus' built a new demo to help explain it 🙏

oluwasefunmi's profile picture
oluwasefunmi1 year ago

This is so crazy that I have literally never seen this feature before And it's baseline!

Related Videos