[csswg-drafts] Add a new pseudo-element ::NEXT (#13856)

korenevskiy has just created a new issue for https://github.com/w3c/csswg-drafts:

== Add a new pseudo-element ::NEXT ==
This element is similar to `::before` and `::after`, but the difference is that the new pseudo-element `::next` is located outside the parent tag. It is located nearby, and has the same display size as the parent. 

this element will solve many problems for lists and cards.

BEVORE:
```html
<ul>
<li>Item 1
<li class=separator>|
<li>Item 2
<li class=separator>|
<li>Item 3
<li class=separator>|
<li>Item 4
</ul>
```
AFTER:
```html
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
<li>Item 4
</ul>
<style>ul li::next{ content: '|' } ul li:last-child::next{ content: none }</style>
```
We are separating the content from the content separators, and the pixels will be smaller, the separators will be spent in CSS.


```html
<ul>
<li><a title='Product name 1'><img></a> Description<li>

<li><a title='Product name 2'><img></a> Description<li>

<li><a title='Product name 3'><img></a> Description<li>
</ul>
<style>
ul li{
 display: flex;
 flex-direction: column;
}
ul a{
 display: block;
}
ul a::next{ 
 content: attr(title);
}</style>
```
We don't need to create two identical links for the picture and the product name in the HTML in the product profile. 
In most cases, I use the A tag with overflow: hidden to crop the image, but that's why all pseudo-elements are also cropped. In addition, the pseudo-element needs to be aligned to the grid as parents.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13856 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 29 April 2026 03:16:35 UTC