Editorial review: Document :target-before and :target-after pseudos #42103
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
|
Member
There was a problem hiding this comment. add an outline or some other non-color differentiator for those who can't distinguish reds
Contributor
Author
There was a problem hiding this comment. In this case, the three different link states (before, current, and after) are distinguished by gray and line-through, red, and black and underlined, so they are not distinguished by color alone. |
||
| } | ||
| ``` | ||
|
|
||
| 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) | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please use macros in the css docs whenever possible
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I usually do, but at the moment, I'm using raw markdown links until the cssxref macro is fixed. Last time I checked, it was still broken for new links.