{"id":270643,"date":"2018-05-18T07:16:01","date_gmt":"2018-05-18T14:16:01","guid":{"rendered":"http:\/\/css-tricks.com\/?p=270643"},"modified":"2022-01-26T07:06:12","modified_gmt":"2022-01-26T15:06:12","slug":"css-counters-custom-list-number-styling","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-counters-custom-list-number-styling\/","title":{"rendered":"Using CSS Counters for Custom List Number Styling"},"content":{"rendered":"\n

How about a classic CSS trick! Getting custom styling on lists isn’t even so tricky anymore, since CSS counters have introduced counter-increment<\/code><\/a> and counter-reset<\/code><\/a>, and that is perfect for this. I just wanted to make sure you knew how it works and had some easy-to-copy examples at the ready.<\/p>\n\n\n\n\n\n\n\n

Let’s say all you wanna do is style the dang numbers:<\/p>\n\n\n\n