CSS :target-before Pseudo-Class

CSS :target-before Pseudo-Class

The CSS :target-before pseudo-class selects scroll markers that appear before the currently active marker within the same scroll marker group. It can style navigation links for earlier sections or carousel items, helping users distinguish previous positions from the current and upcoming positions. This experimental feature is defined in CSS Overflow Module Level 5.

:target-before Syntax

:target-before {
  property: value;
}

The :target-before pseudo-class matches scroll markers that precede the active marker in their scroll marker group.

Basic Example

a:target-before {
  color: #777;
}

Styles qualifying scroll marker links that come before the active marker.

Navigation Example

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

Opacity Example

.section-nav a:target-before {
  opacity: 0.65;
}

No Arguments

Write :target-before without parentheses or arguments.

Important Requirement

The selector applies to scroll markers, not to arbitrary HTML elements that happen to appear before another element.

How :target-before Works

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

Step 1 - Create Navigation Links

<nav class="section-nav" aria-label="Page sections">
  <a href="#section-one">One</a>
  <a href="#section-two">Two</a>
  <a href="#section-three">Three</a>
</nav>

Step 2 - Create Matching 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 Target Group

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

The scroll-target-group property establishes a group of qualifying navigation links that act as scroll markers.

Step 4 - Style Earlier Markers

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

Step 5 - Navigate Through the Content

When the active marker changes, the browser updates which markers match :target-before.

No JavaScript Required

Supporting browsers determine marker states automatically without requiring a JavaScript scroll listener.

Scroll Marker Groups

A scroll marker group associates navigation markers with scroll destinations. Each group can maintain its own active marker.

Create a Group

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

Navigation Links

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

Link Destinations

Each link must identify an appropriate destination to participate as a scroll target marker.

Marker Order

The before and after relationships use the markers' flat tree order within the group, rather than their visual placement on screen.

Generated Scroll Markers

Scroll marker groups can also contain generated ::scroll-marker pseudo-elements, commonly used for CSS carousels.

Multiple Groups

A document can have multiple scroll marker groups. The current marker and relative marker states are determined separately for each group.

Scroll Marker States

Three related pseudo-classes describe a marker's position relative to the active marker.

Comparison

Example Marker Positions

If the third marker in a group of four is active, the markers have these states:

Complete CSS

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

These selectors can distinguish earlier, current, and later navigation positions in supporting browsers.

:target vs. :target-before

The :target pseudo-class and :target-before pseudo-class are used for different types of targeting.

Fragment Target

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

Highlights the section identified by the current URL fragment.

Previous Scroll Markers

.section-nav a:target-before {
  color: #888;
}

Styles markers preceding the active marker in the group.

Scrolling and Marker Order

The active marker can change as users scroll through content or activate navigation links.

Scrolling Through Content

When a different scroll target becomes active, the browser updates the associated marker states.

Earlier Markers

Markers that precede the active marker match :target-before.

Current Marker

The active marker matches :target-current.

Later Markers

Markers following the active marker match :target-after.

Document Order

The order is based on marker positions in the group's flat tree, not on the current scroll direction or visual layout order.

Not a History Record

The :target-before pseudo-class does not mean that a user previously clicked a marker or read its content.

:target-before Specificity

The :target-before pseudo-class contributes a specificity of 0-1-0.

Specificity Examples

Specificity Example

.section-nav a {
  color: #333;
}
.section-nav a:target-before {
  color: #888;
}

The second rule has higher specificity and applies to earlier scroll markers when other cascade factors are equal.

Practical Uses

The :target-before pseudo-class can help users understand their relative position within a sequence of scroll destinations.

Table of Contents

.table-of-contents a:target-before {
  color: #888;
}

Section Navigation

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

Progress Indicators

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

Carousel Navigation

In a supported carousel scroll marker group, earlier markers can receive a different appearance from the current and upcoming markers.

Documentation Navigation

.documentation-nav a:target-before {
  color: #777;
}

These examples require a supported scroll marker group containing the selected links.

Limitations

The :target-before pseudo-class is experimental and should be used with progressive enhancement.

Limited Browser Support

Some browsers do not implement the selector or the related scroll marker features.

Scroll Markers Only

The selector does not match arbitrary elements positioned before another element.

Requires a Scroll Marker Group

Markers must belong to a group that supports active marker selection.

Depends on an Active Marker

The before relationship is determined relative to the group's active marker.

Not Based on Scroll Direction

Scrolling upward does not reverse the meaning of before and after.

No Completion Tracking

A marker matching :target-before does not prove that its content was read or completed.

No Automatic Accessibility State

CSS styling alone does not announce a navigation position or progress state to assistive technology.

Evolving Specification

The feature belongs to CSS Overflow Module Level 5, which is still evolving.

Best Practices

• Use :target-before only with scroll markers in a supported scroll marker group.
• Use scroll-target-group: auto when creating a marker group from ordinary navigation links.
• Combine :target-before, :target-current, and :target-after to distinguish navigation positions.
• Keep links usable when the experimental selectors are unsupported.
• Use descriptive navigation labels and unique destination IDs.
• Do not treat earlier markers as evidence of completed content.
• Use more than color alone when the distinction is important.
• Test scrolling, link activation, and keyboard navigation.
• Provide fallback styling for browsers without scroll marker support.

:target-before Example

This example uses four navigation links in a scroll marker group. Scroll through the sections or click a link to change the active marker. Earlier markers receive gray text with a line through them, the active marker appears blue, and later markers appear brown in supporting browsers.

HTML

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

Browser Result

Play in Editor

Note: The navigation remains functional in browsers without support for :target-before, but the before, current, and after marker styles may not appear.

Browser Support

Baseline: Limited availability. The :target-before pseudo-class is experimental. Chromium-based browsers introduced support in Chrome and Edge 142. Support in other browsers remains limited, so the selector should not be required for essential navigation.

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

Specifications

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

CSS Overflow Module Level 5 - Selecting Scroll Markers