::scroll-marker-group | CSS Selectors & Pseudo-classes

A new experimental pseudo-element that acts as a container for individual 'scroll markers'. It's used to create native CSS carousels with built-in navigation dots.

Quick example

.carousel {
  /* Creates a container for the navigation dots inside the carousel */
  display: scroll-marker-group-container;
}

.carousel::scroll-marker-group {
  display: flex;
  gap: 10px;
  justify-content: center;
}

::scroll-marker-group Browser Support

Limited availability 69% global usage

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Not ready for production without a fallback.

View on caniuse.com → View on MDN → View on webstatus.dev → View spec → Learn more about Baseline →

135+