CSS :target-after Pseudo-Class

CSS :target-after Pseudo-Class

The CSS :target-after pseudo-class selects scroll markers that follow the currently active scroll marker within the same scroll marker group. It allows navigation links for upcoming sections to have a different appearance from the current section and previously visited sections. This experimental feature is defined in CSS Overflow Module Level 5 and has limited browser support.

:target-after Syntax

:target-after {
  property: value;
}

The :target-after pseudo-class matches scroll markers positioned after the active marker in their scroll marker group.

Basic Example

a:target-after {
  color: #666;
}

Styles navigation links that are scroll markers following the currently active marker.

Underline Upcoming Sections

a:target-after {
  text-decoration: underline;
}

Combined with a Navigation Container

.section-nav a:target-after {
  color: #666;
}

Limits the styling to matching links inside the section-nav container.

No Arguments

The pseudo-class is written as :target-after, without parentheses or arguments.

Scroll Marker Requirement

The selector applies to scroll markers, including qualifying links inside a container with scroll-target-group: auto and supported ::scroll-marker pseudo-elements. It does not match arbitrary elements simply because they follow another element in the document.

How :target-after Works

The browser determines which scroll marker is active within a scroll marker group. Markers following that active marker can match :target-after.

Step 1 - Create Navigation Links

<nav class="section-nav">
  <a href="#section-one">Section One</a>
  <a href="#section-two">Section Two</a>
  <a href="#section-three">Section Three</a>
</nav>

Step 2 - Define the Sections

<section id="section-one">
  <h2>Section One</h2>
</section>
<section id="section-two">
  <h2>Section Two</h2>
</section>
<section id="section-three">
  <h2>Section Three</h2>
</section>

Step 3 - Establish a Scroll Marker Group

.section-nav {
  scroll-target-group: auto;
}

The browser can treat the links as scroll markers associated with their destination sections.

Step 4 - Style Upcoming Markers

.section-nav a:target-after {
  color: #777;
}

Step 5 - Scroll Through the Page

As the active marker changes, the markers following it update automatically. The CSS selector does not require JavaScript to track the current section.

Scroll Marker Groups

A scroll marker group organizes navigation markers that correspond to positions or targets within scrollable content.

The scroll-target-group Property

.section-nav {
  scroll-target-group: auto;
}

The auto value establishes a scroll target group containing qualifying links.

HTML Navigation

<nav class="section-nav" aria-label="Page sections">
  <a href="#intro">Introduction</a>
  <a href="#syntax">Syntax</a>
  <a href="#examples">Examples</a>
</nav>

Matching Destination IDs

Each navigation link should point to a valid destination using its fragment identifier.

Marker Order

The browser determines which markers come before or after the active marker using their flat tree order within the group, not their visual placement on screen.

Generated Scroll Markers

The related ::scroll-marker pseudo-element provides another mechanism for creating scroll markers, commonly used with CSS carousels.

Independent Groups

Each scroll marker group determines its own active marker. A page can contain multiple groups.

The Active Scroll Marker

Within each scroll marker group, the browser determines one active marker at a time. That marker matches :target-current.

Active Marker Styling

.section-nav a:target-current {
  color: #006699;
  font-weight: bold;
}

Upcoming Marker Styling

.section-nav a:target-after {
  color: #777;
}

Example Marker Order

Suppose a group contains four links and the second link is active.

Automatic Updates

When the browser selects another active marker, the before, current, and after states are recalculated.

Related Target States

Three pseudo-classes work together to identify the relative positions of scroll markers.

Comparison

Complete CSS Example

.section-nav {
  scroll-target-group: auto;
}
.section-nav a:target-before {
  color: #888;
}
.section-nav a:target-current {
  color: #006699;
  font-weight: bold;
}
.section-nav a:target-after {
  color: #333;
}

This provides different styles for earlier, current, and later navigation positions.

Not Three URL Fragments

These states describe scroll marker positions within a group. They are not three different fragment identifiers in the document URL.

:target vs. :target-after

Although their names are similar, these pseudo-classes serve different purposes.

Using :target

section:target {
  background-color: #eaf6fc;
}

Highlights the section identified by the document URL fragment.

Using :target-after

.section-nav a:target-after {
  color: #777;
}

Styles navigation markers after the current marker in a scroll marker group.

Scrolling Behavior

The active scroll marker can change as users move through the content, even without clicking navigation links.

Scrolling Through Sections

When a different destination becomes the active scroll target, its corresponding marker can match :target-current.

Markers After the Current Position

Markers following the newly active marker match :target-after.

Navigation Link Activation

Clicking a marker link can navigate to its destination and change which marker is active.

Document Order

Before and after refer to the markers' order within their group, not necessarily whether their destinations are above or below the viewport.

No Scroll Listener Required

In supporting browsers, CSS handles the selector changes without a JavaScript scroll event listener.

:target-after Specificity

The :target-after pseudo-class contributes a specificity of 0-1-0, like other standard pseudo-classes.

Specificity Examples

Specificity Example

.section-nav a {
  color: #333;
}
.section-nav a:target-after {
  color: #777;
}

The second selector is more specific and applies to matching upcoming markers when other cascade factors are equal.

Practical Uses

The :target-after pseudo-class can help communicate which navigation destinations follow the current position.

Table of Contents

.table-of-contents a:target-after {
  color: #666;
}

Progress Navigation

.progress-nav a:target-after {
  opacity: 0.65;
}

Upcoming Section Indicators

.section-nav a:target-after {
  text-decoration: underline dotted;
}

Scroll-Linked Navigation

.section-nav a:target-current {
  font-weight: bold;
}
.section-nav a:target-after {
  color: #777;
}

CSS Carousels

The selector can also style scroll markers associated with carousel items, where the marker group supports these states.

Limitations

The :target-after pseudo-class is an experimental feature with specific requirements.

Limited Browser Support

Not all major browsers implement the selector.

Scroll Markers Only

The selector applies to scroll markers rather than arbitrary elements following a target.

Requires a Marker Group

The browser must establish a scroll marker group containing the relevant markers.

Requires an Active Marker

The before and after relationships depend on which marker the browser has selected as active.

Order-Based Matching

The selector uses marker order within the group, not visual layout order.

Not a Completion Record

A marker before the current position does not necessarily mean the user has read or completed that section.

No Automatic Accessibility Announcements

Changing CSS colors does not automatically announce progress to assistive technology.

Experimental Specification

The feature is defined in CSS Overflow Module Level 5, which continues to evolve.

Best Practices

• Use :target-after only with supported scroll marker groups.
• Use scroll-target-group: auto when creating navigation groups from ordinary links.
• Pair :target-after with :target-current and :target-before when displaying relative navigation positions.
• Keep navigation links usable when the pseudo-class is unsupported.
• Use color and another visual cue when distinguishing navigation states.
• Maintain descriptive link text and valid destination IDs.
• Do not treat scroll position as proof that a user completed a section.
• Test the behavior in browsers that implement the relevant CSS Overflow features.
• Use progressive enhancement rather than making essential navigation depend on the selector.

:target-after Example

This example uses a scroll marker group to style navigation links based on their position relative to the active section. Scroll through the content or click a navigation link. Links after the active marker receive the :target-after styling in supporting browsers.

HTML

<div class="target-after-demo">
  <nav class="section-nav" aria-label="Example sections">
    <a href="#demo-one">One</a>
    <a href="#demo-two">Two</a>
    <a href="#demo-three">Three</a>
    <a href="#demo-four">Four</a>
  </nav>
  <div class="scroll-content">
    <section id="demo-one"><h2>Section One</h2><p>First section.</p></section>
    <section id="demo-two"><h2>Section Two</h2><p>Second section.</p></section>
    <section id="demo-three"><h2>Section Three</h2><p>Third section.</p></section>
    <section id="demo-four"><h2>Section Four</h2><p>Fourth section.</p></section>
  </div>
</div>

CSS

.target-after-demo .section-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  scroll-target-group: auto;
}
.target-after-demo .section-nav a {
  padding: 5px;
  color: #333;
}
.target-after-demo .section-nav a:target-before {
  color: #888;
  text-decoration: line-through;
}
.target-after-demo .section-nav a:target-current {
  color: #006699;
  font-weight: bold;
}
.target-after-demo .section-nav a:target-after {
  color: #b45309;
  text-decoration: underline;
}
.target-after-demo .scroll-content {
  height: 180px;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.target-after-demo section {
  min-height: 180px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}
.target-after-demo section h2 {
  margin: 0 0 10px;
  font-size: 18px;
}
@media (prefers-reduced-motion: reduce) {
  .target-after-demo .scroll-content {
    scroll-behavior: auto;
  }
}

Browser Result

Play in Editor

Note: In supporting browsers, the active navigation link is blue, earlier links are gray with a line through them, and later links are brown with an underline. In unsupported browsers, the navigation links remain usable without the additional state styling.

Browser Support

Baseline: Limited availability. The :target-after pseudo-class is experimental and is not supported by all major browsers. Chromium-based browsers introduced support in Chrome and Edge 142. Other browsers may ignore the selector.

For current compatibility information, visit Can I Use? and search for :target-after.

Specifications

The :target-after pseudo-class is defined in CSS Overflow Module Level 5 alongside :target-before and :target-current.

CSS Overflow Module Level 5 - Selecting Scroll Markers