diff --git a/files/en-us/web/css/guides/overflow/carousels/index.md b/files/en-us/web/css/guides/overflow/carousels/index.md
index 1e572aa2410c84a..eef0644ab2bee0f 100644
--- a/files/en-us/web/css/guides/overflow/carousels/index.md
+++ b/files/en-us/web/css/guides/overflow/carousels/index.md
@@ -39,6 +39,8 @@ The CSS carousel features provide pseudo-elements and pseudo-classes that enable
   - : Generated inside the children of a scroll container ancestor or within a scroll container's columns, to represent their scroll markers. These can be selected to scroll the container to their associated child elements or column, and are collected inside the scroll container's {{cssxref("::scroll-marker-group")}} for layout purposes.
 - {{cssxref(":target-current")}}
   - : This pseudo-class can be used to select the currently-active scroll marker. It can be used to provide a highlight style to the currently active marker, which is important for usability and accessibility.
+- [`:target-before`](/en-US/docs/Web/CSS/Reference/Selectors/:target-before) and [`:target-after`](/en-US/docs/Web/CSS/Reference/Selectors/:target-after)
+  - : These pseudo-classes can be used to select scroll markers before and after the currently-active scroll marker, respectively. This is useful for styling navigation items that come before and after the active navigation position, to help give the user an indication of what they've already looked at, and what is still to come.
 - {{cssxref("::column")}}
   - : This pseudo-element represents the individual columns generated when a container is set to display its content in multiple columns via [CSS multi-column layout](/en-US/docs/Web/CSS/Guides/Multicol_layout). It can be used in conjunction with {{cssxref("::scroll-marker")}} to generate a scroll marker for each column.
 
@@ -533,9 +535,23 @@ ul::column::scroll-marker {
   border: 2px solid black;
   border-radius: 10px;
 }
+```
+
+Finally, we again use the `:target-current` pseudo-element to mark the active scroll marker, providing the user with an idea of where they are in the navigation. However, we also use the [`:target-before`](/en-US/docs/Web/CSS/Reference/Selectors/:target-before) and [`:target-after`](/en-US/docs/Web/CSS/Reference/Selectors/:target-after) pseudo-classes to give the scroll markers before and after the active scroll marker some custom styling. We also set a {{cssxref("transition")}} on the `ul::column::scroll-marker:target-current` ruleset, so that the style changes between the different states animate smoothly.
+
+```css live-sample___second-example
+ul::column::scroll-marker:target-before {
+  border: 2px solid gray;
+}
 
 ul::column::scroll-marker:target-current {
   background-color: black;
+  transition: all 0.7s;
+}
+
+ul::column::scroll-marker:target-after {
+  border: 2px solid red;
+  background-color: red;
 }
 ```
 
diff --git a/files/en-us/web/css/guides/overflow/index.md b/files/en-us/web/css/guides/overflow/index.md
index 162e6e7ee955fac..c6b531b97ea401c 100644
--- a/files/en-us/web/css/guides/overflow/index.md
+++ b/files/en-us/web/css/guides/overflow/index.md
@@ -239,6 +239,8 @@ The CSS overflow level 4 module also introduces the `block-ellipsis`, `continue`
 - {{cssxref("::scroll-button()")}}
 - {{cssxref("::scroll-marker")}}
 - {{cssxref("::scroll-marker-group")}}
+- [`:target-after`](/en-US/docs/Web/CSS/Reference/Selectors/:target-after)
+- [`:target-before`](/en-US/docs/Web/CSS/Reference/Selectors/:target-before)
 - {{cssxref(":target-current")}}
 
 ### Data types
diff --git a/files/en-us/web/css/reference/properties/scroll-marker-group/index.md b/files/en-us/web/css/reference/properties/scroll-marker-group/index.md
index 4b074bd758a9db6..17b81e80acab46b 100644
--- a/files/en-us/web/css/reference/properties/scroll-marker-group/index.md
+++ b/files/en-us/web/css/reference/properties/scroll-marker-group/index.md
@@ -187,6 +187,8 @@ Note the placement of the scroll marker group container. Check out how the keybo
 - {{cssxref("::scroll-marker-group")}}
 - {{cssxref("::scroll-marker")}}
 - {{cssxref(":target-current")}}
+- [`:target-before`](/en-US/docs/Web/CSS/Reference/Selectors/:target-before)
+- [`:target-after`](/en-US/docs/Web/CSS/Reference/Selectors/:target-after)
 - [Creating CSS carousels](/en-US/docs/Web/CSS/Guides/Overflow/Carousels)
 - [CSS overflow](/en-US/docs/Web/CSS/Guides/Overflow) module
 - [CSS Carousel Gallery](https://chrome.dev/carousel/) via chrome.dev (2025)
diff --git a/files/en-us/web/css/reference/properties/scroll-target-group/index.md b/files/en-us/web/css/reference/properties/scroll-target-group/index.md
index 06d56d0c21ecbc8..e477d7bef7a65fc 100644
--- a/files/en-us/web/css/reference/properties/scroll-target-group/index.md
+++ b/files/en-us/web/css/reference/properties/scroll-target-group/index.md
@@ -450,6 +450,6 @@ Try navigating in each of these three ways: by activating the scroll marker link
 
 - {{cssxref("scroll-marker-group")}}
 - {{cssxref("::scroll-marker-group")}} and {{cssxref("::scroll-marker")}} pseudo-elements
-- {{cssxref(":target-current")}} pseudo-class
+- {{cssxref(":target-current")}}, [`:target-before`](/en-US/docs/Web/CSS/Reference/Selectors/:target-before), and [`:target-after`](/en-US/docs/Web/CSS/Reference/Selectors/:target-after) pseudo-classes
 - [Creating CSS carousels](/en-US/docs/Web/CSS/Guides/Overflow/Carousels)
 - [CSS overflow](/en-US/docs/Web/CSS/Guides/Overflow) module
diff --git a/files/en-us/web/css/reference/selectors/_colon_target-after/index.md b/files/en-us/web/css/reference/selectors/_colon_target-after/index.md
new file mode 100644
index 000000000000000..759387b39cbb64d
--- /dev/null
+++ b/files/en-us/web/css/reference/selectors/_colon_target-after/index.md
@@ -0,0 +1,259 @@
+---
+title: :target-after
+slug: Web/CSS/Reference/Selectors/:target-after
+page-type: css-pseudo-class
+status:
+  - experimental
+browser-compat: css.selectors.target-after
+sidebar: cssref
+---
+
+{{SeeCompatTable}}
+
+The **`:target-after`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes) selects elements that come after the **active** scroll marker (the scroll marker of a {{cssxref("scroll-marker-group")}} that is currently scrolled to) in a navigation menu. This [selector](/en-US/docs/Web/CSS/Guides/Selectors) can be used to style navigation items that come after the active navigation position within a scroll marker group.
+
+> [!NOTE]
+> The `:target-after` pseudo-class is only valid on {{cssxref("::scroll-marker")}} pseudo-elements and elements that have been designated as scroll markers via the [`scroll-target-group`](/en-US/docs/Web/CSS/Reference/Properties/scroll-target-group) property.
+
+## Syntax
+
+```css-nolint
+:target-after {
+  /* ... */
+}
+```
+
+## Examples
+
+### Targeting navigation items before and after the active scroll marker
+
+In this example, we use the [`:target-before`](/en-US/docs/Web/CSS/Reference/Selectors/: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 {{htmlelement("section")}} elements containing content, and a table of contents created using an ordered list ({{htmlelement("ol")}}/{{htmlelement("li")}}) and {{htmlelement("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>
+
+<!-- ... -->
+```
+
+```html hidden live-sample___targeting-before-and-after
+<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>My story</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>
+  <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>
+  <p>
+    Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
+    orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
+    ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
+    Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra
+    congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus
+    varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+  </p>
+  <p>
+    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
+    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+  </p>
+</section>
+<section id="ch2" class="chapter">
+  <h2>Chapter 2</h2>
+  <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>
+  <p>
+    Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
+    orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
+    ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
+    Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra
+    congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus
+    varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+  </p>
+</section>
+<section id="ch3" class="chapter">
+  <h2>Chapter 3</h2>
+  <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>
+  <p>
+    Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
+    orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
+    ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
+    Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra
+    congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus
+    varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+  </p>
+</section>
+<section id="ch4" class="chapter">
+  <h2>Chapter 4</h2>
+  <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>
+  <p>
+    Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
+    orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
+    ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
+    Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra
+    congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus
+    varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+  </p>
+</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` {{cssxref("color")}} so that it stands out clearly.
+
+```css hidden live-sample___targeting-before-and-after
+body {
+  font: 1.2em / 1.5 system-ui;
+  width: 50%;
+  max-width: 700px;
+  margin: 0 auto;
+}
+
+nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+}
+
+section {
+  padding-top: 60px;
+}
+
+a {
+  color: black;
+  text-decoration: none;
+}
+
+a:hover,
+a:focus {
+  text-decoration: underline;
+}
+
+ol {
+  display: flex;
+  width: 100%;
+  justify-content: space-around;
+  list-style-type: none;
+  padding: 20px 0;
+  margin: 0;
+  background: white;
+}
+```
+
+```css live-sample___targeting-before-and-after
+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 live-sample___targeting-before-and-after
+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.
+
+{{EmbedLiveSample("targeting-before-and-after", "100%", 500)}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{cssxref("scroll-marker-group")}}
+- [`scroll-target-group`](/en-US/docs/Web/CSS/Reference/Properties/scroll-target-group)
+- [`:target-current`](/en-US/docs/Web/CSS/Reference/Selectors/:target-current), [`:target-before`](/en-US/docs/Web/CSS/Reference/Selectors/:target-before)
+- {{cssxref("::scroll-marker")}}
+- {{cssxref("::scroll-marker-group")}}
+- [Creating CSS carousels](/en-US/docs/Web/CSS/Guides/Overflow/Carousels)
+- [CSS overflow](/en-US/docs/Web/CSS/Guides/Overflow) module
+- [CSS Carousel Gallery](https://chrome.dev/carousel/) via chrome.dev (2025)
diff --git a/files/en-us/web/css/reference/selectors/_colon_target-before/index.md b/files/en-us/web/css/reference/selectors/_colon_target-before/index.md
new file mode 100644
index 000000000000000..bfc969bdfb5e886
--- /dev/null
+++ b/files/en-us/web/css/reference/selectors/_colon_target-before/index.md
@@ -0,0 +1,259 @@
+---
+title: :target-before
+slug: Web/CSS/Reference/Selectors/:target-before
+page-type: css-pseudo-class
+status:
+  - experimental
+browser-compat: css.selectors.target-before
+sidebar: cssref
+---
+
+{{SeeCompatTable}}
+
+The **`:target-before`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes) selects elements that come before the **active** scroll marker (the scroll marker of a {{cssxref("scroll-marker-group")}} that is currently scrolled to) in a navigation menu. This [selector](/en-US/docs/Web/CSS/Guides/Selectors) 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 {{cssxref("::scroll-marker")}} pseudo-elements and elements that have been designated as scroll markers via the [`scroll-target-group`](/en-US/docs/Web/CSS/Reference/Properties/scroll-target-group) property.
+
+## Syntax
+
+```css-nolint
+:target-before {
+  /* ... */
+}
+```
+
+## Examples
+
+### Targeting navigation items before and after the active scroll marker
+
+In this example, we use the `:target-before` and [`:target-after`](/en-US/docs/Web/CSS/Reference/Selectors/: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 {{htmlelement("section")}} elements containing content, and a table of contents created using an ordered list ({{htmlelement("ol")}}/{{htmlelement("li")}}) and {{htmlelement("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>
+
+<!-- ... -->
+```
+
+```html hidden live-sample___targeting-before-and-after
+<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>My story</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>
+  <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>
+  <p>
+    Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
+    orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
+    ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
+    Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra
+    congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus
+    varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+  </p>
+  <p>
+    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
+    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+  </p>
+</section>
+<section id="ch2" class="chapter">
+  <h2>Chapter 2</h2>
+  <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>
+  <p>
+    Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
+    orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
+    ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
+    Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra
+    congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus
+    varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+  </p>
+</section>
+<section id="ch3" class="chapter">
+  <h2>Chapter 3</h2>
+  <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>
+  <p>
+    Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
+    orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
+    ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
+    Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra
+    congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus
+    varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+  </p>
+</section>
+<section id="ch4" class="chapter">
+  <h2>Chapter 4</h2>
+  <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>
+  <p>
+    Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
+    orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
+    ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
+    Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra
+    congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus
+    varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+  </p>
+</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` {{cssxref("color")}} so that it stands out clearly.
+
+```css hidden live-sample___targeting-before-and-after
+body {
+  font: 1.2em / 1.5 system-ui;
+  width: 50%;
+  max-width: 700px;
+  margin: 0 auto;
+}
+
+nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+}
+
+section {
+  padding-top: 60px;
+}
+
+a {
+  color: black;
+  text-decoration: none;
+}
+
+a:hover,
+a:focus {
+  text-decoration: underline;
+}
+
+ol {
+  display: flex;
+  width: 100%;
+  justify-content: space-around;
+  list-style-type: none;
+  padding: 20px 0;
+  margin: 0;
+  background: white;
+}
+```
+
+```css live-sample___targeting-before-and-after
+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 live-sample___targeting-before-and-after
+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.
+
+{{EmbedLiveSample("targeting-before-and-after", "100%", 500)}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{cssxref("scroll-marker-group")}}
+- [`scroll-target-group`](/en-US/docs/Web/CSS/Reference/Properties/scroll-target-group)
+- [`:target-current`](/en-US/docs/Web/CSS/Reference/Selectors/:target-current), [`:target-after`](/en-US/docs/Web/CSS/Reference/Selectors/:target-after)
+- {{cssxref("::scroll-marker")}}
+- {{cssxref("::scroll-marker-group")}}
+- [Creating CSS carousels](/en-US/docs/Web/CSS/Guides/Overflow/Carousels)
+- [CSS overflow](/en-US/docs/Web/CSS/Guides/Overflow) module
+- [CSS Carousel Gallery](https://chrome.dev/carousel/) via chrome.dev (2025)
diff --git a/files/en-us/web/css/reference/selectors/_colon_target-current/index.md b/files/en-us/web/css/reference/selectors/_colon_target-current/index.md
index 425d31d8d8c6d30..59a4aba2247c45f 100644
--- a/files/en-us/web/css/reference/selectors/_colon_target-current/index.md
+++ b/files/en-us/web/css/reference/selectors/_colon_target-current/index.md
@@ -10,10 +10,10 @@ sidebar: cssref
 
 {{SeeCompatTable}}
 
-The **`:target-current`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes) selects the **active** scroll marker — the {{cssxref("::scroll-marker")}} pseudo-element of a {{cssxref("scroll-marker-group")}} that is currently scrolled to. This [selector](/en-US/docs/Web/CSS/Guides/Selectors) can be used to style the active navigation position within a [scroll marker group](/en-US/docs/Web/CSS/Reference/Selectors/::scroll-marker-group#description).
+The **`:target-current`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes) selects the **active** scroll marker — the scroll marker of a {{cssxref("scroll-marker-group")}} that is currently scrolled to. This [selector](/en-US/docs/Web/CSS/Guides/Selectors) can be used to style the active navigation position within a scroll marker group.
 
 > [!NOTE]
-> The `:target-current` pseudo-class is only valid on `::scroll-marker` pseudo-elements.
+> The `:target-current` pseudo-class is only valid on {{cssxref("::scroll-marker")}} pseudo-elements and elements that have been designated as scroll markers using the [`scroll-target-group`](/en-US/docs/Web/CSS/Reference/Properties/scroll-target-group) property.
 
 ## Syntax
 
@@ -50,6 +50,8 @@ See [Creating CSS carousels](/en-US/docs/Web/CSS/Guides/Overflow/Carousels) and
 ## See also
 
 - {{cssxref("scroll-marker-group")}}
+- [`scroll-target-group`](/en-US/docs/Web/CSS/Reference/Properties/scroll-target-group)
+- [`:target-before`](/en-US/docs/Web/CSS/Reference/Selectors/:target-before), [`:target-after`](/en-US/docs/Web/CSS/Reference/Selectors/:target-after)
 - {{cssxref("::scroll-marker")}}
 - {{cssxref("::scroll-marker-group")}}
 - [Creating CSS carousels](/en-US/docs/Web/CSS/Guides/Overflow/Carousels)
diff --git a/files/en-us/web/css/reference/selectors/_doublecolon_scroll-marker-group/index.md b/files/en-us/web/css/reference/selectors/_doublecolon_scroll-marker-group/index.md
index 286f8f72a01cfc3..87af5f894cccacd 100644
--- a/files/en-us/web/css/reference/selectors/_doublecolon_scroll-marker-group/index.md
+++ b/files/en-us/web/css/reference/selectors/_doublecolon_scroll-marker-group/index.md
@@ -193,6 +193,8 @@ ul::scroll-marker-group {
 - {{cssxref("::scroll-marker")}}
 - {{cssxref("::column")}}
 - {{cssxref(":target-current")}}
+- [`:target-before`](/en-US/docs/Web/CSS/Reference/Selectors/:target-before)
+- [`:target-after`](/en-US/docs/Web/CSS/Reference/Selectors/:target-after)
 - [Creating CSS carousels](/en-US/docs/Web/CSS/Guides/Overflow/Carousels)
 - [CSS anchor positioning](/en-US/docs/Web/CSS/Guides/Anchor_positioning) module
 - [CSS overflow](/en-US/docs/Web/CSS/Guides/Overflow) module
diff --git a/files/en-us/web/css/reference/selectors/_doublecolon_scroll-marker/index.md b/files/en-us/web/css/reference/selectors/_doublecolon_scroll-marker/index.md
index 817db7a40d45975..b20d98fb86a4b00 100644
--- a/files/en-us/web/css/reference/selectors/_doublecolon_scroll-marker/index.md
+++ b/files/en-us/web/css/reference/selectors/_doublecolon_scroll-marker/index.md
@@ -196,6 +196,8 @@ To improve user experience, we set a different color on the markers on {{cssxref
 - {{cssxref("::scroll-button()")}}
 - {{cssxref("::scroll-marker-group")}}
 - {{cssxref(":target-current")}}
+- [`:target-before`](/en-US/docs/Web/CSS/Reference/Selectors/:target-before)
+- [`:target-after`](/en-US/docs/Web/CSS/Reference/Selectors/:target-after)
 - [Creating CSS carousels](/en-US/docs/Web/CSS/Guides/Overflow/Carousels)
 - [CSS lists and counters](/en-US/docs/Web/CSS/Guides/Lists) module
 - [CSS overflow](/en-US/docs/Web/CSS/Guides/Overflow) module