CSS ::scroll-marker-group Pseudo-Element

CSS ::scroll-marker-group Pseudo-Element

The ::scroll-marker-group pseudo-element creates a container for navigation markers associated with a scroll container. It allows developers to arrange and style scroll markers, such as carousel pagination dots, using CSS without adding separate navigation elements to the HTML.

Syntax

selector::scroll-marker-group {
  property: value;
}

The selector identifies the scroll container that generates the marker group.

The ::scroll-marker-group pseudo-element represents the generated container holding its scroll markers.

For example:

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

This rule arranges the generated navigation markers in a centered row with space between them.

The scroll container must also use the scroll-marker-group property to generate the group.

.carousel {
  scroll-marker-group: after;
}

The ::scroll-marker-group pseudo-element does not accept arguments.

Unlike ::scroll-button(), it does not use parentheses or directional keywords.

How It Works

The ::scroll-marker-group pseudo-element provides a container for navigation markers generated by the ::scroll-marker pseudo-element.

It is commonly used with CSS carousels and other scrollable interfaces containing multiple navigation targets.

The process involves four steps:

1. Create a scroll container with multiple scrollable items.
2. Set scroll-marker-group: before or scroll-marker-group: after on the scroll container.
3. Generate individual markers using ::scroll-marker on the scrollable items.
4. Use ::scroll-marker-group to style and position the collection of markers.

For example:

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;
}
.carousel-item {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
.carousel-item::scroll-marker {
  content: "";
}
.carousel::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 10px;
}

The browser generates a marker for each carousel item and collects those markers into the group associated with the carousel.

When a marker is activated, the browser scrolls its associated item into view.

The marker group provides the navigation structure, while individual markers provide the interactive controls.

No JavaScript is required for basic marker navigation in supporting browsers.

The scroll-marker-group Property

The scroll-marker-group property controls whether a scroll container generates a marker group and where that group appears in the generated structure.

It accepts three values:

For example:

.carousel {
  scroll-marker-group: before;
}

This generates the marker group before the carousel.

To generate the group after the carousel:

.carousel {
  scroll-marker-group: after;
}

The before and after values determine the generated group's position in the structure, not its final visual placement when additional positioning rules are applied.

Use the ::scroll-marker-group pseudo-element to control its appearance and layout.

Creating a Scroll Marker Group

To create a scroll marker group, first define a scroll container and enable marker group generation.

HTML:

<div class="gallery">
  <div class="gallery-item">HTML</div>
  <div class="gallery-item">CSS</div>
  <div class="gallery-item">JavaScript</div>
</div>

CSS:

.gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;
}
.gallery-item {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
.gallery-item::scroll-marker {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ccc;
}
.gallery::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 12px;
}

The scroll-marker-group: after declaration generates the group.

The ::scroll-marker selector creates a marker for each gallery item.

The ::scroll-marker-group selector arranges the markers in a centered row.

The browser manages navigation between the markers and their associated scroll targets.

Positioning the Marker Group

The marker group can be positioned using CSS layout and positioning properties.

CSS anchor positioning is useful when the marker group needs to appear at a particular location relative to its scroll container.

For example:

.carousel {
  anchor-name: --carousel;
  scroll-marker-group: after;
}
.carousel::scroll-marker-group {
  position: absolute;
  position-anchor: --carousel;
  position-area: bottom;
  justify-self: anchor-center;
  margin-top: 15px;
}

The anchor-name property establishes a named anchor on the carousel.

The position-anchor property associates the marker group with that anchor.

The position-area: bottom declaration positions the group below the anchor.

The justify-self: anchor-center declaration centers the group horizontally relative to its anchor.

The margin-top property adds space between the carousel and its markers.

Anchor positioning is not required for every marker group, but it provides precise placement when the generated group must be positioned relative to the scroll container.

Styling the Marker Group

The ::scroll-marker-group pseudo-element can use familiar CSS layout properties to arrange its markers.

For example:

.carousel::scroll-marker-group {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 6px;
}

The display: flex declaration arranges markers using Flexbox.

The justify-content: center declaration centers markers along the main axis.

The align-items: center declaration aligns markers along the cross axis.

The flex-wrap: wrap declaration allows markers to move onto additional rows when necessary.

The gap property controls the spacing between markers.

The padding, background-color, and border-radius properties style the group container.

Individual marker appearance is controlled separately through ::scroll-marker.

Styling the Active Marker

The :target-current pseudo-class identifies the marker associated with the currently active scroll target.

It is applied to individual scroll markers rather than the marker group.

For example:

.carousel-item::scroll-marker {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #ccc;
}
.carousel-item::scroll-marker:target-current {
  background-color: #0066cc;
}

Inactive markers appear gray, while the current marker appears blue.

The browser updates the current marker as the active scroll target changes.

For keyboard navigation, use :focus-visible to provide a focus indicator:

.carousel-item::scroll-marker:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 3px;
}

The active state and keyboard focus state are different and should remain visually distinguishable.

Styling the marker group does not automatically style the active marker. Each state requires its own selector.

Example

The following example creates a horizontally scrolling carousel with navigation markers arranged below the content.

HTML:

<div class="marker-group-demo">
  <div class="marker-group-slide">HTML</div>
  <div class="marker-group-slide">CSS</div>
  <div class="marker-group-slide">JavaScript</div>
  <div class="marker-group-slide">Flexbox</div>
</div>

CSS:

.marker-group-demo {
  display: flex;
  width: 300px;
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;
  anchor-name: --marker-group-demo;
}
.marker-group-slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: 35px 15px;
  border: 1px solid #ccc;
  background-color: #eef5ff;
  text-align: center;
  font-weight: bold;
  scroll-snap-align: start;
}
.marker-group-demo::scroll-marker-group {
  position: absolute;
  position-anchor: --marker-group-demo;
  position-area: bottom;
  justify-self: anchor-center;
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 15px;
}
.marker-group-slide::scroll-marker {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 2px solid #0066cc;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
}
.marker-group-slide::scroll-marker:target-current {
  background-color: #0066cc;
}
.marker-group-slide::scroll-marker:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 3px;
}

In supporting browsers, four circular navigation markers appear below the carousel.

Click a marker to scroll to its corresponding item.

The active marker appears blue while inactive markers remain white with blue borders.

The ::scroll-marker-group pseudo-element arranges and positions the markers as a collection.

The ::scroll-marker pseudo-element controls each individual navigation marker.

In browsers without support for scroll markers, the content remains horizontally scrollable.

::scroll-marker-group vs. ::scroll-marker

The ::scroll-marker-group and ::scroll-marker pseudo-elements work together but serve different purposes.

For example:

.carousel::scroll-marker-group {
  display: flex;
  gap: 10px;
}
.carousel-item::scroll-marker {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #0066cc;
}

The first rule controls the layout of the marker collection.

The second rule controls the appearance of each marker.

Both selectors are needed when creating a customized scroll marker navigation interface.

Supported CSS Properties

The ::scroll-marker-group pseudo-element supports CSS properties used for layout, spacing, backgrounds, borders, and positioning.

For example:

.carousel::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 10px;
  border-radius: 6px;
  background-color: #f5f5f5;
}

This creates a centered marker collection with consistent spacing and a light background.

Limitations

The ::scroll-marker-group pseudo-element has several limitations.

• It is a relatively new CSS feature with limited browser availability.
• It requires the scroll-marker-group property to generate the group.
• Individual markers must be generated separately using ::scroll-marker.
• It does not create directional scroll buttons.
• Complex positioning may require CSS anchor positioning or other layout rules.
• Unsupported browsers ignore the pseudo-element and its styling rules.
• Marker navigation is most useful when the scroll container contains identifiable scroll targets.

For production websites, ensure the content remains accessible when scroll marker navigation is unavailable.

Ordinary scrolling, touch gestures, and keyboard navigation should remain usable.

Accessibility Considerations

Scroll marker groups provide navigation between related scroll targets and should remain accessible to keyboard and assistive technology users.

Follow these accessibility practices:

• Ensure individual markers have meaningful accessible names.
• Provide visible keyboard focus indicators.
• Maintain sufficient contrast between active and inactive markers.
• Make navigation targets large enough to activate comfortably.
• Do not rely on color alone to identify the active marker.
• Keep the underlying content accessible without the marker group.
• Test marker navigation using a keyboard and assistive technologies.
• Respect reduced-motion preferences when applying smooth scrolling.

Supporting browsers expose scroll marker groups and their markers using built-in navigation semantics.

The marker group organizes the controls, while individual markers provide the navigation actions.

For markers displaying only symbols, alternative text can be supplied through the content property:

.carousel-item:first-child::scroll-marker {
  content: "\2022" / "HTML slide";
}

This provides an accessible description for the first marker.

Always verify accessible names and keyboard behavior in the browsers you support.

Browser Support

The ::scroll-marker-group pseudo-element has limited browser availability.

It is supported in newer Chromium-based browsers, including recent versions of Chrome and Edge.

Availability in Firefox, Safari, and other browsers may differ.

Unsupported browsers ignore the pseudo-element and do not generate the associated navigation group.

Use a feature query to apply scroll marker styling conditionally:

@supports selector(::scroll-marker-group) and selector(::scroll-marker) {
  .carousel {
    scroll-marker-group: after;
  }
  .carousel::scroll-marker-group {
    display: flex;
    gap: 10px;
  }
  .carousel-item::scroll-marker {
    content: "";
  }
}

This applies the marker navigation rules only when the browser recognizes both pseudo-elements.

For current compatibility information, visit Can I Use? and search for CSS scroll markers or CSS carousel features.

Also consult MDN for implementation details and compatibility updates.

Specifications

The ::scroll-marker-group pseudo-element is defined in the CSS Overflow Module Level 5 .

The specification describes scroll marker groups, individual scroll markers, and their relationship to scroll containers.

Related features include the scroll-marker-group property, ::scroll-marker, and the :target-current pseudo-class.