1. Web
  2. CSS
  3. Reference
  4. Selectors
  5. :target-before
View on MDN

:target-before

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The :target-before CSS pseudo-class selects elements that come before the active scroll marker (the scroll marker of a scroll-marker-group that is currently scrolled to) in a navigation menu. This selector can be used to style navigation items that come before the active navigation position within a scroll marker group.

Note: The :target-before pseudo-class is only valid on ::scroll-marker pseudo-elements and elements that have been designated as scroll markers via the scroll-target-group property.

Syntax

css
:target-before {
  /* ... */
}

Examples

Targeting navigation items before and after the active scroll marker

In this example, we use the :target-before and :target-after pseudo-classes to highlight the scroll markers before and after the active scroll marker appropriately, giving the user an indication of what items have already been viewed, and which are still to come.

HTML

Our markup has a series of <section> elements containing content, and a table of contents created using an ordered list (<ol>/<li>) and <a> elements.

html
<nav id="toc">
  <ol>
    <li><a href="#intro">Introduction</a></li>
    <li><a href="#ch1">Chapter 1</a></li>
    <li><a href="#ch2">Chapter 2</a></li>
    <li><a href="#ch3">Chapter 3</a></li>
    <li><a href="#ch4">Chapter 4</a></li>
  </ol>
</nav>
<section id="intro" class="chapter">
  <h1>Prose of the century</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet.
  </p>
</section>
<section id="ch1" class="chapter">
  <h2>Chapter 1</h2>

  <!-- ... -->
</section>
<section id="ch2" class="chapter">
  <h2>Chapter 2</h2>

  <!-- ... -->
</section>

<!-- ... -->

CSS

We've set scroll-target-group: auto on the <ol> to turn it into a scroll marker group container and trigger the browser's algorithm for calculating which <a> element is the active scroll marker at any given time (that is, which link's target is currently in view). We then style the :target-current pseudo-class with a red color so that it stands out clearly.

css
ol {
  scroll-target-group: auto;
}

:target-current {
  color: red;
}

Finally, we use the :target-before pseudo-class to style all <a> elements before the active scroll marker with a gray color and strike-through, to make them look completed/finished, and we use the :target-after pseudo-class to style all <a> elements after the active scroll marker with a bright underline.

css
a:target-before {
  color: gray;
  text-decoration: line-through;
}

a:target-after {
  text-decoration: underline orange 2px;
}

Result

Try navigating by activating the links and by scrolling. You'll see that in each case, the red highlight moves between the links to match the section currently being shown, and the links before and after the current red link update to adopt the styles defined in our a:target-before and a:target-after rules.

Specifications

Specification
CSS Overflow Module Level 5
# selectordef-target-before

Browser compatibility

See also

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content