::scroll-marker

Limited availability

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

The ::scroll-marker CSS pseudo-element can be generated inside any element and represents its scroll marker. A scroll marker behaves like an anchor (<a> element) whose scroll target is its originating element — when activated, the element's nearest ancestor scroll container will scroll to it.

Syntax

css
::scroll-marker {
  /* ... */
}

Description

A ::scroll-marker is generated on an element when the ::scroll-marker's content property is set to a non-none value, and its has an ancestor scroll container with a non-none scroll-marker-group property value (meaning that it will generate a ::scroll-marker-group pseudo-element).

The ::scroll-marker-group pseudo-element automatically contains any ::scroll-marker pseudo-elements generated on the scroll container's decendants. This allows them to be positioned and laid out as a group, and is typically used when creating a CSS carousel, to create a scroll position indicator. The individual scroll markers can also be used to navigate to their associated content items.

Accessibility-wise, the scroll marker group and contained scroll markers are rendered with tablist/tab semantics. When you Tab to the group, it behaves like a single item (that is, another press of the Tab key will move past the group to the next item), and you can move between the different scroll markers using the left and right (or up and down) cursor keys.

Examples

See Creating CSS carousels for full examples that use the ::scroll-marker pseudo-element.

Specifications

Specification
CSS Overflow Module Level 5
# scroll-marker-pseudo

Browser compatibility

See also