Editorial review: Document nested pseudo-elements #38680
Conversation
chrisdavidmills
changed the title
|
Preview URLs External URLs (2)URL:
URL:
(comment last updated: 2025-04-03 07:10:40) |
chrisdavidmills
changed the title
There was a problem hiding this comment.
Hi @chrisdavidmills, thank you for your work on documenting this feature!
I've left some comments and suggestions – mostly around clarity and structure. Curious to hear what you think.
I'd be happy to help with/take up improvements to the existing content in a follow-up PR.
| #### Result | ||
|
|
||
| {{EmbedLiveSample('Styling `::before::marker` nested pseudo-elements', 450, 200)}} | ||
|
|
There was a problem hiding this comment.
would be nice to add some quick explanation of the result.
There was a problem hiding this comment.
I added an explanation in the intro for each demo. Let me know if you think some of it should be moved to the result.
There was a problem hiding this comment.
Thank you! That explanation is perfect just before the code demos.
One thing we can add after the result is to say that while the bullet markers of "Intro...Understanding" are generated because they are list items <li> but start and end have been inserted by the use of pseudo-elements and ::marker is used to style their bullets – I think this would solidify the example.
| - {{CSSxRef("::after")}} | ||
| - `::after::marker`: Selects the {{CSSxRef("::marker")}} pseudo-element of an `::after` pseudo-element, when `::after` is styled as a list item {{CSSxRef("display", "display: list-item")}}. | ||
| - {{CSSxRef("::before")}} | ||
| - `::before::marker`: Selects the {{CSSxRef("::marker")}} pseudo-element of a `::before` pseudo-element, when `::before` is styled as a list item {{CSSxRef("display", "display: list-item")}}. |
There was a problem hiding this comment.
either needs a comma like: "...is styled as a list item, {{CSSxRef("display", "display: list-item")}}."
or can be made more direct like: "...is styled with {{CSSxRef("display", "display: list-item")}}."
|
|
||
| The `::before::marker` [nested pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements#nesting_pseudo-elements) selects the list {{CSSxRef("::marker")}} of an `::after` pseudo-element that is itself a list item, that is, it has its {{CSSxRef("display")}} property set to `list-item`. | ||
|
|
||
| In this demo, we generate before and after markers for a list navigation menu using `::before` and `::after`, setting them to `display: list-item` so they behave like list items. We then use `ul::before::marker` and `ul::after::marker` to color their list markers a different color. |
There was a problem hiding this comment.
I'd tweak this slightly. Instead of saying "before and after markers", might be clearer to say items before and after the list..
| In this demo, we generate before and after markers for a list navigation menu using `::before` and `::after`, setting them to `display: list-item` so they behave like list items. We then use `ul::before::marker` and `ul::after::marker` to color their list markers a different color. | |
| In this demo, we generate extra items before and after the list navigation menu using `::before` and `::after`, setting them to `display: list-item` so they behave like list items. We then use `ul::before::marker` and `ul::after::marker` to color their list markers a different color. |
| #### Result | ||
|
|
||
| {{EmbedLiveSample('Styling `::before::marker` nested pseudo-elements', 450, 200)}} | ||
|
|
There was a problem hiding this comment.
Thank you! That explanation is perfect just before the code demos.
One thing we can add after the result is to say that while the bullet markers of "Intro...Understanding" are generated because they are list items <li> but start and end have been inserted by the use of pseudo-elements and ::marker is used to style their bullets – I think this would solidify the example.
| <ul> | ||
| <li>One</li> | ||
| <li>Two</li> | ||
| <li>Three</li> | ||
| </ul> |
There was a problem hiding this comment.
you'd expect "Table of contents" to link to a table of contents
Of course!! So that won't be a good option here.
What about using a heading? Like "Contents". It wouldn't need a link. And styling it with a transparent bullet:
ul::before::marker,
ul::after::marker {
color: transparent;
}
Can't come up with any replacement for end :)) I actually looked at some hard copy books just now.
Contents
- Introduction
- Getting started
- Understanding the basics
End
Description
Chrome has added support for styling nested pseudo-elements, beginning in version 135 with
::after::markerand::before::marker. See https://chromestatus.com/feature/5199947786616832.This PR:
::beforeand::afterpages to show the nested pseudo-elements in action.Note: Unless I've missed something, there doesn't seem to be a really obvious use case for these two nested pseudos — it seems like they are just part of setting up the system for more useful things to come in the future, like carousel/fragmentation (see https://github.com/flackr/carousel/tree/main/fragmentation)
Motivation
Additional details
Related issues and pull requests