How makers stay productive

So this css code, navigates through the dom to "count" how many players there are. In this case our Accordion Section Header has a class of "accordion", so it looks for that class and when it finds it, it adds some ::before content with the current item index value. Then it goes to the next one and does the same. So now my friend can add/delete/reorder players without manually updating the number every time.

Yeah it's pretty slick and seems to be supported in most browsers.

This is all the code it took as well…

    body{
        counter-reset: player; 
    }

    .accordion::before{
        counter-increment: player;
        content: "#" counter(player) " ";
    }

what's it do?

In my case, my friend has an accordion on his page, with like 100 sections, but he wants the header of each section to show "#1 Player Name", next one would be "#2 Player Name", etc. It's just a static Shopify site so it's all hard-coded. The problem is the order of players changes somewhat often, so if he moved player 3 down to player 50, he would have to manually update all the numbers.

oooh didn't know about this!