links mode

Syntax

/* mode keyword combined with a position keyword (either order) */
scroll-marker-group: before links;
scroll-marker-group: links after;

/* links is the default mode: these behave identically */
scroll-marker-group: after;
scroll-marker-group: after links;

links is one of the two mode keywords in the grammar none | [ [ before | after ] || [ links | tabs ] ] (quoted verbatim from the propdef). The spec’s value definition, in full: “The generated ::scroll-marker-group operates in ‘links’ mode, functioning like a navigation list. This is the default mode if omitted.”

Inputs

links is a bare keyword and takes no arguments. It combines with at most one position keyword (before | after) via the || combinator, in either order, and cannot be combined with none or with tabs. The grammar permits scroll-marker-group: links with no position keyword, but the spec prose read on 2026-10-04 defines the group box’s placement only for before (box precedes the originating element; first child when originating from the root element) and after (box follows; last child from the root element) — include a position keyword in practice.

Outputs: roles and focus order

Per CSS Overflow 5 §3.1.6, when the mode is links:

• “The roles of ::scroll-marker-group and ::scroll-marker are navigation and link respectively.”
• “All ::scroll-marker pseudo-elements are tab stops, in order.”
• “The roles of the originating elements are unaffected.”

The result maps to the <nav> + <a> structural pattern: assistive technology announces a navigation landmark containing links, and the document’s own headings, paragraphs, and other content keep their natural semantics. The active marker additionally matches :target-current, and the explainer notes aria-current is specced to be set on the active marker.

Errors

A CSS keyword value has no exception surface. A declaration that does not match the grammar (for example scroll-marker-group: links tabs, which repeats the mode slot) is syntactically invalid and the declaration is ignored, per standard CSS error handling; in browsers without mode support the same applies and the property falls back to any earlier valid declaration. The failure mode is the declaration not applying — feature-detect with CSS.supports("scroll-marker-group", "after links").

Context and prerequisites

scroll-marker-group applies to scroll containers (propdef “Applies to” line). Markers appear only when descendants also generate ::scroll-marker pseudo-elements with a non-none computed content value; those markers are collected into the ::scroll-marker-group of the nearest scroll container ancestor. The mode is read from the scroll-marker-group value of the group’s originating element. Available without flags from Chrome 154 (runtime flag CSSScrollMarkerGroupModes, status stable).

Lifecycle: activation

Activating a links-mode marker scrolls its scroll target into view (block/inline alignment “start”) and, on invocation, follows the hyperlink, updating the URL. Then, specific to links mode: the browser sets “the sequential focus navigation starting point to the originating element, losing focus from the scroll marker” — the same behavior as clicking a standard internal <a href="#target"> link, so the next Tab press continues from the content the user jumped to. Markers reflect the current scroll position: the marker whose target is at the scroll position is the active one (:target-current).

Examples

A table-of-contents navigation generated from headings, adapted from the explainer’s links-mode example (live upstream demo: CodePen):

.toc {
  /* Core links mode declaration */
  scroll-marker-group: before links;

  overflow-y: auto;
  height: 50vh;
  counter-reset: section;

  &::scroll-marker-group {
    position: absolute;
    width: 180px;
  }

  & h3 {
    counter-increment: section;

    /* Generate a link marker for each heading */
    &::scroll-marker {
      display: block;
      content: counter(section) ". " attr(data-label);
    }

    /* Style the marker whose target is in view */
    &::scroll-marker:target-current {
      color: ActiveText;
      font-weight: bold;
    }
  }
}

Each h3 contributes one marker; the group is announced as a navigation landmark and every marker is a sequential tab stop, like a list of anchor links. A live interactive comparison of both modes is embedded on the feature overview.

Compatibility

Because links is the default mode, a declaration like scroll-marker-group: after degrades cleanly in Chrome 135–153: the markers still render, with whatever focus/role behavior that version implemented.

Security and privacy

CSS Overflow 5 declares that it “introduces no new privacy considerations” and “no new security considerations” (Appendices C and D). links mode is additionally the conservative accessibility choice: it does not reassign roles on the originating elements and does not remove any content from the accessibility tree, so the document reads the same with or without the markers.

Canonical sources

• CSS Overflow 5 — valdef links and §3.1.6 Scroll Marker Modes
• Explainer — scroll-marker-group modes vs. WAI-ARIA patterns
• ChromeStatus — CSS scroll-marker-group modes (5109685301673984)
• CSSWG PR #13627 · issue #12122