demo · v141

Navigation Menu with Context Highlighting

Jump to any section. In Chrome 141 the CSS pseudo-classes :target-before and :target-after light up the section just before and just after the active one — giving readers and screen-reader users instant context about what surrounds the current position.

probing :target-before / :target-after support…

Target section Show previous/next context

Choose a section to see target-before and target-after states.

:target-before (previous section) :target (active section) :target-after (next section — "coming up")

Introduction

The web platform's anchor-link model lets any URL point at a specific element via the fragment identifier. This has powered in-page navigation for decades — click a link, the browser scrolls, :target fires. But designers have long wanted to style the surrounding context too, not just the target itself.

Origins of the proposal

The CSS Overflow 5 specification introduced :target-before and :target-after alongside scroll markers. They match scroll markers that precede or follow the active one inside a scroll-marker-group — giving carousels and reading-progress indicators a pure-CSS solution. Chrome 141 ships both pseudo-classes.

Scroll marker groups

A scroll-marker-group container holds ::scroll-marker pseudo-elements. The browser tracks which marker is "current" (:target-current), and all markers before it match :target-before while those after match :target-after. Progress indicators, step wizards, and breadcrumb trails are the canonical use cases.

Navigation patterns

This demo goes one step further: it uses :target-before and :target-after on the article sections themselves — not just inside a scroll marker group. Jump to section 5, and section 4 gets a left-border accent while section 6 gets a "coming up next" label. The side navigation mirrors these states so readers always know their position.

The CSS cascade

Pseudo-classes participate in specificity like any other selector. section:target-before has specificity (0,1,1) — same as section:hover. Authors can layer these on top of existing styles without fighting inheritance. The pseudo-classes also compose with combinators, allowing section:target-after + p or :target-before > h2.

Accessibility considerations

Colour alone is never sufficient. The "coming up next" label injected via ::after on :target-after h2 is announced by screen readers because ::after content is accessible text. Pair border accents with a visible change in text or icon content for users who cannot distinguish colours. WCAG 1.4.1 applies.

Fallback strategy

A JavaScript shim using hashchange and sibling traversal covers browsers that don't yet support :target-before / :target-after. Apply CSS classes .js-before, .js-target, .js-after — the same styles apply and the UX is identical. Progressive enhancement at its most literal.

Current limitations

As of Chrome 141, :target-before and :target-after are specified primarily for scroll markers inside a scroll-marker-group. Applying them to arbitrary sections (as this demo does via the JS shim) relies on a broader interpretation that may not be supported natively outside scroll-marker-groups. Watch the spec for updates.

the CSS

/* Section styling */
section:target {
  background: var(--bg-stone);
  border-left: 3px solid var(--text-black);
}

/* Chrome 141 — section just before the target */
section:target-before {
  border-left: 3px solid var(--accent-blue);
}

/* Chrome 141 — section just after the target */
section:target-after {
  border-left: 3px solid var(--accent-emerald);
}

/* "coming up next" label via generated content */
section:target-after h2::after {
  content: " — coming up next";
  font-size: 0.75rem;
  color: var(--accent-emerald);
}

/* Feature detection */
@supports selector(:target-before) {
  /* native path — rely on CSS only, skip JS shim */
}