::scroll-marker

Carousel dots the browser draws itself

CaveatA marker only exists once content is set on it. An empty string counts; leaving the property out produces no pseudo-element at all, so the group renders as nothing and the feature reads as unsupported when it is working perfectly. The group also has to be declared on the scroll container itself with scroll-marker-group, not on the items.

FallbackAn engine without it drops scroll-marker-group and the pseudo-elements, leaving a plain scroll-snap carousel: swipe and trackpad still work, there are simply no dots. That is a real carousel with no script in it, so this ships unguarded rather than behind a feature query.

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;
}
.carousel > li::scroll-marker {
  /* no content, no marker at all */
  content: "";
  width: 8px;
  height: 8px;
}
li::scroll-marker:target-current {
  background: CanvasText;
}

Published 25 Aug 2026