demo · v135

Numbered pagination from a CSS counter

The pull-quote use case from the spec: each marker isn't just a dot, it's the panel's number. counter() inside ::scroll-marker's content auto-numbers every panel, and :target-current highlights the in-view slide — no JS bookkeeping required.

::scroll-marker: ?
Introduction
Background
Method
Results
Discussion
Conclusion

the code

.scroll {
  counter-reset: panel;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
}
.scroll > .slide { counter-increment: panel; }
.scroll::scroll-marker-group { display: flex; gap: 8px; }
.scroll > .slide::scroll-marker {
  content: counter(panel);    /* 1, 2, 3, … */
  width: 26px; height: 26px;
  border: 2px solid black; background: white;
}
.scroll > .slide::scroll-marker:target-current {
  background: black; color: white;
}

see also