--- title: A Responsive Item Counter with CSS only | daily.dev description: A pure CSS technique for building responsive '+X more' item counters without JavaScript resize observers or event listeners. The approach combines CSS... canonical: https://daily.dev/posts/a-responsive-item-counter-with-css-only-vnhqzrjnk twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: A Responsive Item Counter with CSS only | daily.dev og:description: A pure CSS technique for building responsive '+X more' item counters without JavaScript resize observers or event listeners. The approach combines CSS... og:url: https://daily.dev/posts/a-responsive-item-counter-with-css-only-vnhqzrjnk og:image: https://api.daily.dev/og/posts/VnHqzrJNk.png og:image:alt: A Responsive Item Counter with CSS only og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # A Responsive Item Counter with CSS only **[GitButler Blog](https://daily.dev/sources/gitbutler)** · 5 min read · 0 upvotes · 0 comments ## Summary A pure CSS technique for building responsive '+X more' item counters without JavaScript resize observers or event listeners. The approach combines CSS Container Queries (for component-width breakpoints), CSS Custom Properties (to pass base hidden counts from JS to CSS), and CSS Counters with calc() (to compute the total hidden item count dynamically). JavaScript only sets initial parameters; all responsive hiding and counter updates happen automatically in CSS. The post includes markup examples using Svelte, container query breakpoints that hide specific nth-child items, and advanced enhancements like content-aware hiding and smooth opacity transitions. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [Counting Elements in CSS: Using Sibling-Count and Hacks](https://daily.dev/posts/counting-elements-in-css-using-sibling-count-and-hacks-fyrhrhsyv) · Frontend Masters · 2 upvotes · 0 comments - [Implementing children-count\(\) using Modern CSS](https://daily.dev/posts/implementing-children-count-using-modern-css-vcl0v6csa) · CSS Tip · 13 upvotes · 0 comments - [CSS Counters: auto-update list numbers without JavaScript](https://daily.dev/posts/css-counters-auto-update-list-numbers-without-javascript-3dpvgdhnp) · RUBYLAND · 0 upvotes · 0 comments - [Trimming our CSS with sibling-index\(\) and sibling-count\(\)](https://daily.dev/posts/trimming-our-css-with-sibling-index-and-sibling-count--n88d0rcej) · thoughbot · 13 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css), [#ui-design](https://daily.dev/tags/ui-design) [View this post on daily.dev](https://daily.dev/posts/a-responsive-item-counter-with-css-only-vnhqzrjnk) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"A Responsive Item Counter with CSS only","url":"https://daily.dev/posts/a-responsive-item-counter-with-css-only-vnhqzrjnk","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/a-responsive-item-counter-with-css-only-vnhqzrjnk"},"datePublished":"2026-07-26T07:48:23.431Z","dateModified":"2026-07-26T07:50:01.228Z","description":"A pure CSS technique for building responsive '+X more' item counters without JavaScript resize observers or event listeners. The approach combines CSS...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/b4037044b476999134431c04a472c635?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/b4037044b476999134431c04a472c635?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"GitButler Blog","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"GitButler Blog","logo":"https://media.daily.dev/image/upload/s--LrHsyt2T--/f_auto/v1692632054/squad_placeholder_sfwkmj","url":"https://daily.dev/sources/gitbutler"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/a-responsive-item-counter-with-css-only-vnhqzrjnk","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"css,ui-design","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"GitButler Blog","item":"https://daily.dev/sources/gitbutler"},{"@type":"ListItem","position":3,"name":"A Responsive Item Counter with CSS only"}]} ```