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

A new experimental pseudo-element that represents an individual navigation dot in a carousel. You can style these dots (like an active/inactive state) directly in CSS.

Quick example

.carousel-item::scroll-marker {
  content: '';
  width: 12px;
  height: 12px;
  background: #ccc;
  border-radius: 50%;
}

.carousel-item::scroll-marker:checked {
  background: var(--brand);
}

::scroll-marker 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+