How to Count Overflowed Tags with Pure CSS and Scroll‑Driven Animations

Idea and Problem

The goal is to lay out multiple tags of different widths horizontally and, when the container width is insufficient, show a number indicating how many tags are hidden. Implementing this with JavaScript requires listening to size changes, but a pure‑CSS solution is possible and much simpler.

CSS Counters

CSS counters can automatically count elements. By resetting a counter on the container and incrementing it on each tag, the total number of tags can be displayed via a pseudo‑element.

.con { counter-reset: num; }
.tag { counter-increment: num; }
.num::after { content: "+" counter(num); }

The default start value is 0 and the increment is 1, yielding a count of 7 for the example. The start value and increment can be customized:

.con { counter-reset: num 10; }
.tag { counter-increment: num -1; }

This configuration starts at 10 and decrements by 1, resulting in a final count of 3.

Scroll‑Driven Animation for Visibility Detection

CSS view‑timeline animations let us know when an element enters the container’s visible area. Using animation-timeline: view(inline) and animation-range: contain triggers an animation exactly at the moment a tag becomes visible.

.tag {
  animation: appear;
  animation-timeline: view(inline);
  animation-range: contain;
}
@keyframes appear { to { background-color: #4d47ff; } }

When the animation runs, we can also increment the counter, thereby counting only the visible tags.

Counting Overflow (Hidden) Tags

Two approaches are presented:

Set the counter’s initial value to the total number of tags and decrement it inside the animation ( counter-increment: num -1). This yields the number of hidden tags.

Keep the normal increment ( counter-increment: num) but reset the increment to 0 when a tag is inside the view, effectively counting only the hidden ones.

.con { counter-reset: num 7; }
@keyframes appear { from, to { background-color: #4d47ff; counter-increment: num -1; } }

Mask and Margin Adjustments

A semi‑transparent mask can indicate overflow using a linear‑gradient mask:

.con { -webkit-mask: linear-gradient(to right, #fff calc(100% - 30px), transparent); }

If there is no overflow, the mask should disappear. This is achieved by driving the mask with the same scroll‑driven animation used for visibility detection.

.con { animation: check; animation-timeline: scroll(x self); }
@keyframes check { from, to { -webkit-mask: linear-gradient(to right, #fff calc(100% - 30px), transparent); } }

When the mask is active, the count label may be hidden by applying a negative margin‑right to the container. The margin is restored to 0 inside the animation, so the count appears only when overflow occurs.

.con { margin-right: -20px; }
@keyframes check { from, to { margin-right: 0; } }

Final Result

Combining the counter, view‑timeline animation, mask, and margin tricks produces a fully CSS‑based solution that displays tags, hides overflowed ones, and shows a dynamic count of hidden tags—all without JavaScript. The demo works in Chrome 115+.