Add a new pseudo-element ::NEXT

[korenevskiy]

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.

1st usage scenario

BEVORE:

<ul>
	<li>Item 1
	<li class=separator>|
	<li>Item 2
	<li class=separator>|
	<li>Item 3
	<li class=separator>|
	<li>Item 4
</ul>

AFTER:

<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 еhe size of AJAX responses will be smaller, the separators will be spent in CSS.

2st usage scenario

<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>
<!-- Where A::NEXT - will have a diplay:block by analogy with the parent tag of A,
 but will be located outside the tag A as a content element LI -->

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.

<ul>
	<li><a  data-src='image1.jpg'>Product name 1</a> Description<li>

	<li><a  data-src='image2.jpg'>Product name 2</a> Description<li>

	<li><a  data-src='image3.jpg'>Product name 3</a> Description<li>
</ul>
<!-- OR -->
<style>
ul a::next{ 
	content: url(attr(data-src));
} 
</style>

We will have all one link in the list item, but there will actually be 2 active links (picture and title), as in the previous example.