# CSS Counters Published articles for CSS Counters. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Styling Ordered Lists with CSS Counters DevFeed: [Styling Ordered Lists with CSS Counters]() Original publisher: [Read original article]() Author: Josh W. Comeau Published: 2020-04-07T14:00:00Z Content type: tutorial Language: en Sources: [Josh Comeau's blog]() Topics: [CSS](), [Tutorial](), [Web Development]() Tags: [css](), [css-counters](), [feature](), [selector](), [semantics](), [serve](), [specificity](), [tutorial]() ### AI overview This tutorial explains how to use CSS counters to style the numbers in semantic ordered lists. It also covers recursive numbering for nested lists and notes browser support, including Internet Explorer 8. ### Source excerpt Styling an ordered list can be surprisingly tricky; there's no way to get at that bullet! In this tutorial, we'll see a handy trick using CSS counters that lets us style ordered lists without breaking proper semantics. ## Let's Use CSS Counters DevFeed: [Let's Use CSS Counters]() Original publisher: [Read original article]() Author: Ahmad Shadeed Published: 2020-02-26T00:00:00Z Content type: tutorial Language: en Sources: [Ahmad Shadeed]() Topics: [CSS](), [Web Development](), [HTML]() Tags: [article](), [css](), [css-counters](), [generated-content](), [how-to](), [property]() ### AI overview A tutorial explaining CSS counters, including the counter-reset, counter-increment, and counter() features. It demonstrates dynamic numbering for headings and nested lists using generated content and pseudo-elements. ### Source excerpt From what I see, CSS counters are underused on the web, even though their support is really good (IE8+)!. In this article, I will explain how you can use CSS counters in your projects, along with some use-cases. What are CSS Counters? They provide us with a way to add generated content as numbers for elements, based on their location in the document. The Three C's There are three properties needed for CSS counters to work. ## On CSS counters plus a CSS3 Reversi UI DevFeed: [On CSS counters plus a CSS3 Reversi UI]() Original publisher: [Read original article]() Author: Lea Verou Published: 2010-04-01T00:00:00Z Content type: tutorial Language: en Sources: [Lea Verou's blog]() Topics: [CSS](), [Web Development](), [selectors](), [HTML](), [User Interfaces](), [browser]() Tags: [articles](), [blog](), [browser](), [chrome](), [css](), [css-counters](), [css3](), [firefox](), [original](), [ui](), [user-interfaces-in-css]() ### AI overview A practical exploration of CSS counters, showing how to count elements, display totals, combine multiple counters, and generate table cell labels. It also presents a CSS3 Reversi interface that demonstrates these techniques and notes browser-support limitations. ### Source excerpt CSS Counters have a lot more potential than most web developers seem to think. The common use case consists of something like: somecontainer { counter-reset: foocount; } Ε { counter-increment: foocount; } Ε::before { content: counter(foocount) ". "; } commonly used to add numbering to section headings or re-create an 's counters in order to style them (since browser support for ::marker is ridiculous). Have you ever thought of applying the counter to different elements than the ones being counted? This way we're able to count elements and display their total count somewhere with CSS alone! (and with the variety of selectors in CSS3, I see great potential here...). I'm referring to something like: ul { counter-reset:foo; } li { counter-increment:foo; } p::after { content:counter(foo); } From my tests, this works flawlessly in Firefox, Safari, Opera and Chrome (I've only checked the latest stable though), as long as the element that displays the count comes after the elements being counted (in the markup). Another underutilized aspect of CSS counters (well, far less underused than the above, but still) is how we can combine multiple in the same pseudoelement. For instance, to count rows and cells of a table and display the count inside each cell: table { counter-reset:row; } tr { counter-increment:row; counter-reset:cell; } td { counter-increment:cell; } td::after { content:counter(row, upper-alpha) counter(cell); } Which displays counters like A1, A2, A3, B1, B2, B3, etc in the cells. When the content property is more properly implemented, you wouldn't even need the last rule. Last but not least, a CSS3 Reversi UI (no images used!) I created a while ago that demonstrates the above (and various other things, like --finally-- a use case for :empty :P ). Looks fine only in Firefox and Opera 10.5, due to lack of support for inset box shadows in Safari and buggy support in Chrome. Works fine in all 4 of them (IE is out of the question anyway). The displayed counts of each p