{"id":7347,"date":"2025-10-09T19:36:27","date_gmt":"2025-10-10T00:36:27","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=7347"},"modified":"2025-10-09T19:36:28","modified_gmt":"2025-10-10T00:36:28","slug":"css-counters-in-action","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/css-counters-in-action\/","title":{"rendered":"CSS Counters in Action"},"content":{"rendered":"\n

A classic for<\/code> loop:<\/p>\n\n\n

for<\/span> (int i = 0<\/span>; i < 10<\/span>; i++) {\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
For most of us, some variation of this code is one of the first things we learned when we were first starting out. For me it was C++, but just about any language has some version of it\u2014even CSS. Yes, CSS has counter variables!<\/p>\n\n\n\n
The Basics<\/h2>\n\n\n\n
CSS Counters are driven by four properties: <\/p>\n\n\n\n
    \n
  1. counter-reset<\/code><\/li>\n\n\n\n
  2. counter-set<\/code><\/li>\n\n\n\n
  3. counter-increment<\/code><\/li>\n\n\n\n
  4. counter()<\/code><\/li>\n<\/ol>\n\n\n\n
    Let’s say we wanted a React component that renders a few lines of text, where the number of lines is received as a prop. But we also want to display line numbers next to each line, and<\/em> we want to use CSS to do so. That last assumption might seem silly, but bear with me; we’ll look at a real-world use case at the end.<\/p>\n\n\n\n
    Here’s the component<\/p>\n\n\n
    const<\/span> NumberedSection: FC<{ count: number<\/span> }> = ({ count<\/span> }<\/span>) =><\/span> {\n  return<\/span> (\n    <div>\n      {Array<\/span>.from({ length: count }).map((_, idx<\/span><\/span>) =><\/span> (\n        <span key={idx}>This is line<\/span>\n      ))}\n    <\/<\/span>div>\n  );\n};<\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
    We’ll use a CSS counter called count-val<\/code> to manage our line numbers. In CSS, we can reset our counter for each and every counter-container<\/code> <div><\/code>.<\/p>\n\n\n
    .counter-container<\/span> {\n  counter-reset<\/span>: count-val;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    And then for each line inside that container, we can increment our counter, and render the current number in a pseudo-element.<\/p>\n\n\n
    .counter-container<\/span> span<\/span>::before<\/span> {\n  counter-increment<\/span>: count-val;\n  content<\/span>: counter<\/span>(count-val);\n  margin-right<\/span>: 5px<\/span>;\n  font-family<\/span>: monospace;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    If we render two of these components like this:<\/p>\n\n\n
    <NumberedSection count={3<\/span>} \/>\n<hr \/>\n<NumberedSection count={4<\/span>} \/><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
    It will display numbered lines just like we want:<\/p>\n\n\n
    \n
    \"CSS<\/figure>\n<\/div>\n\n\n
    If you wanted to increment by some other value than 1, you can specify whatever counter-increment<\/code> you want:<\/p>\n\n\n
    counter-increment<\/span>: count-val<\/span> 2;<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    And if you wanted to just set<\/em> a counter to a specific value, the counter-set<\/code> property is for you. There’s a few other options that are of course discussed on MDN<\/a>.<\/p>\n\n\n\n
    I know this seems silly, and I know this would have been simpler<\/em> to do in JavaScript. The counter variable is already right there<\/em>.<\/p>\n\n\n\n
    A Better Use Case<\/h2>\n\n\n\n
    Let’s get slightly<\/em> more realistic. What if you have various headings on your page, representing section titles. And, as you might have guessed, you want them numbered.<\/p>\n\n\n\n
    Let’s start by reseting a CSS counter right at the root of our page<\/p>\n\n\n
    body<\/span> {\n  counter-reset<\/span>: tile-num;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Then we’ll increment and display that counter for each heading that happens to be on our page. And if we want custom formatting on the line numbers, we can list out strings, and CSS will concatenate them.<\/p>\n\n\n
    h2<\/span>.title<\/span>::before<\/span> {\n  counter-increment<\/span>: tile-num;\n  content<\/span>: counter<\/span>(tile-num) \": \"<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Now when we have some content:<\/p>\n\n\n
    <h2<\/span> className<\/span>=\"title\"<\/span>><\/span>This is a title<\/h1<\/span>><\/span>\n<p<\/span>><\/span>Content content content<\/p<\/span>><\/span>\n\n<h2<\/span> className<\/span>=\"title\"<\/span>><\/span>This is the next title on the page<\/h1<\/span>><\/span>\n<p<\/span>><\/span>Content content content<\/p<\/span>><\/span>\n\n<h2<\/span> className<\/span>=\"title\"<\/span>><\/span>This is a title<\/h1<\/span>><\/span>\n<p<\/span>><\/span>Content content content<\/p<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    We’ll get line numbers next to each heading.<\/p>\n\n\n
    \n
    \"\"<\/figure>\n<\/div>\n\n\n
    One Last Example<\/h2>\n\n\n\n
    Before going, I’d like to share the use case that led me to discover this feature. So far the examples we’ve seen are either contrived, or better served by just using JavaScript. But what if you don’t have control over the markup that’s generated on your page?<\/p>\n\n\n\n
    I recently moved my blog’s code syntax highlighting from Prism<\/a> to Shiki<\/a>. Everything went well except for one thing: Shiki does not support line numbers. This created a perfect use case for CSS counters.<\/p>\n\n\n\n
    I used my Shiki configuration to inject a data-linenumbers<\/code> attribute onto any pre<\/code> tag containing code I wanted numbered, and then I solved this with a little bit of CSS.<\/p>\n\n\n
    pre<\/span>[data-linenumbers]<\/span> code<\/span> {\n  counter-reset<\/span>: step;\n}\n\npre<\/span>[data-linenumbers]<\/span> code<\/span> .line<\/span>::before<\/span> {\n  content<\/span>: counter<\/span>(step);\n  counter-increment<\/span>: step;\n  width<\/span>: 1rem<\/span>;\n  margin-right<\/span>: 1rem<\/span>;\n  display<\/span>: inline-block;\n  text-align<\/span>: right;\n  color<\/span>: rgba<\/span>(115<\/span>, 138<\/span>, 148<\/span>, 0.4<\/span>);\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Just like that, I had numbered lines<\/p>\n\n\n
    \n
    \"Code<\/figure>\n<\/div>\n\n\n
    Odds & Ends<\/h2>\n\n\n\n
    We’ve covered all you’ll probably ever use of CSS counters, but for completeness let’s look at some tricks it supports.<\/p>\n\n\n\n
    Formatting the numbers<\/h3>\n\n\n\n
    It turns out you can customize the display of the number from the CSS counter. The counter()<\/code> function takes an optional second argument, detailed here<\/a>.<\/p>\n\n\n\n
    For example, you can display these counter values as uppercase Roman numerals.<\/p>\n\n\n
    counter<\/span>(tile-num<\/span>, upper-roman<\/span>)<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n
    \n
    \"A<\/figure>\n<\/div>\n\n\n
    Nested Counters<\/h3>\n\n\n\n
    Remember the titles we saw before? What if those containers with the numbered titles could nest within each other.<\/p>\n\n\n\n
    Take a look at this markup.<\/p>\n\n\n
    <div<\/span> className<\/span>=\"nested\"<\/span>><\/span>\n  <h1<\/span> className<\/span>=\"title\"<\/span>><\/span>This is a title<\/h1<\/span>><\/span>\n  <p<\/span>><\/span>Content content content<\/p<\/span>><\/span>\n  <h2<\/span> className<\/span>=\"title\"<\/span>><\/span>This is the next title<\/h2<\/span>><\/span>\n  <section<\/span>><\/span>\n    Content content content\n    <div<\/span> className<\/span>=\"nested\"<\/span>><\/span>\n      <h3<\/span> className<\/span>=\"title\"<\/span>><\/span>Nested title<\/h3<\/span>><\/span>\n      <p<\/span>><\/span>Content content content<\/p<\/span>><\/span>\n      <h3<\/span> className<\/span>=\"title\"<\/span>><\/span>Nested title<\/h3<\/span>><\/span>\n      <section<\/span>><\/span>\n        Content content content\n        <div<\/span> className<\/span>=\"nested\"<\/span>><\/span>\n          <h4<\/span> className<\/span>=\"title\"<\/span>><\/span>Nested 2nd title<\/h4<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      <\/section<\/span>><\/span>\n    <\/div<\/span>><\/span>\n  <\/section<\/span>><\/span>\n  <h2<\/span> className<\/span>=\"title\"<\/span>><\/span>Last title<\/h1<\/span>><\/span>\n  <p<\/span>><\/span>Content content content<\/p<\/span>><\/span>\n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    Do you see how those nested<\/code> containers can … nest<\/em> within each other? Each new nested container resets its counter. But wouldn’t it be neat if css could take all values from the current elements’ ancestors, and connect them? Like a nested table of contents?<\/p>\n\n\n
    \n
    \"\"<\/figure>\n<\/div>\n\n\n
    Well it can! Let’s take a look at the css that produced the above.<\/p>\n\n\n
    .nested<\/span> {\n  counter-reset<\/span>: nested-num;\n}\n.nested<\/span> p<\/span> {\n  margin-left<\/span>: 10px<\/span>;\n}\n\n.nested<\/span> .title<\/span>::before<\/span> {\n  counter-increment<\/span>: nested-num;\n  content<\/span>: counters<\/span>(nested-num, \".\"<\/span>);\n  margin-right<\/span>: 5px<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    To achieve this we just use the counters<\/code> function, rather than counter<\/code>. It takes a second argument that tells CSS how to join the numeric values for all counter instances on the current element. It also supports a third<\/em> argument (not shown) to allow you to alter the display of these numbers, like we did before with roman numerals.<\/p>\n\n\n\n
    Concluding Thoughts<\/h2>\n\n\n\n
    CSS counters are a fun feature that can occasionally come in handy. They\u2019re a useful feature to keep in the back of your mind: they might help you out one day.<\/p>\n","protected":false},"excerpt":{"rendered":"
    CSS has counter variables (based on matching selectors) that you can output as formatted content or use in calculations. <\/p>\n","protected":false},"author":21,"featured_media":7377,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[106,7],"class_list":["post-7347","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-counters","tag-css"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/10\/CSS-Counters-in-Action.jpg?fit=1140%2C676&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=7347"}],"version-history":[{"count":12,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7347\/revisions"}],"predecessor-version":[{"id":7380,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7347\/revisions\/7380"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/7377"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=7347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=7347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=7347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}