diff --git a/app/helpers/columns_helper.rb b/app/helpers/columns_helper.rb
index 26a202e06..222d41357 100644
--- a/app/helpers/columns_helper.rb
+++ b/app/helpers/columns_helper.rb
@@ -30,7 +30,8 @@ module ColumnsHelper
 
     tag.section(id: id, class: classes, tabindex: "0", "aria-selected": selected, data: data, **properties) do
       tag.div(class: "cards__transition-container", data: {
-        controller: "navigable-list",
+        controller: "navigable-list css-variable-counter",
+        css_variable_counter_property_name_value: "--card-count",
         navigable_list_supports_horizontal_navigation_value: "false",
         navigable_list_prevent_handled_keys_value: "true",
         navigable_list_auto_select_value: "false",
diff --git a/app/javascript/controllers/css_variable_counter_controller.js b/app/javascript/controllers/css_variable_counter_controller.js
new file mode 100644
index 000000000..1fa2cd5b9
--- /dev/null
+++ b/app/javascript/controllers/css_variable_counter_controller.js
@@ -0,0 +1,33 @@
+import { Controller } from "@hotwired/stimulus"
+import { debounce } from "helpers/timing_helpers"
+
+export default class extends Controller {
+  static targets = [ "item", "counter" ]
+  static values = {
+    propertyName: String,
+    maxValue: { type: Number, default: 20 }
+  }
+
+  initialize() {
+    this.#updateCounter = debounce(this.#updateCounter.bind(this), 50)
+  }
+
+  connect() {
+    this.#updateCounter()
+  }
+
+  itemTargetConnected() {
+    this.#updateCounter()
+  }
+
+  itemTargetDisconnected() {
+    this.#updateCounter()
+  }
+
+  #updateCounter = () => {
+    if (!this.hasCounterTarget) return
+
+    const count = Math.min(this.itemTargets.length, this.maxValueValue)
+    this.counterTarget.style.setProperty(this.propertyNameValue, count)
+  }
+}
diff --git a/app/views/boards/show/_expander.html.erb b/app/views/boards/show/_expander.html.erb
index be5768e21..d58b68715 100644
--- a/app/views/boards/show/_expander.html.erb
+++ b/app/views/boards/show/_expander.html.erb
@@ -1,4 +1,4 @@
-<button class="cards__expander btn btn--plain" data-collapsible-columns-target="button" data-action="click->collapsible-columns#toggle click->navigable-list#selectCurrentOrReset"
+<button class="cards__expander btn btn--plain" data-collapsible-columns-target="button" data-css-variable-counter-target="counter" data-action="click->collapsible-columns#toggle click->navigable-list#selectCurrentOrReset"
   style="--card-count: <%= [ count, 20 ].min %>" aria-controls="<%= column_id %>" aria-expanded="false">
   <span class="cards__expander-count" data-drag-and-drop-counter="true"><%= count > 99 ? "99+" : count %></span>
   <h2 class="cards__expander-title" data-collapsible-columns-target="title">
diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb
index 9c7824b01..c47ea7802 100644
--- a/app/views/cards/display/_preview.html.erb
+++ b/app/views/cards/display/_preview.html.erb
@@ -1,6 +1,6 @@
 <% draggable = local_assigns.fetch(:draggable, false) && card.published? %>
 
-<%= card_article_tag card, class: "card", draggable: draggable, data: { id: card.number, drag_and_drop_target: "item", navigable_list_target: "item" }, tabindex: 0 do %>
+<%= card_article_tag card, class: "card", draggable: draggable, data: { id: card.number, drag_and_drop_target: "item", navigable_list_target: "item", css_variable_counter_target: "item" }, tabindex: 0 do %>
   <div class="flex flex-column flex-item-grow max-inline-size">
     <%= link_to card_path(card), draggable: false, class: "card__link", title: card_title_tag(card), data: { action: "dialog#close", turbo_frame: "_top" } do %>
       <span class="for-screen-reader"><%= card.title %></span>