Pure CSS Lists

This is a nice way to make a list have the proper Oxford comma no matter what. Useful if you’re using a templating engine and don’t want to bother with Intl.ListFormat

The only issue I see with this is that it’s playing with pseudo-elements so selecting the text is weird.

<span
	class="
	after:content-[',']
	only:after:content-['']
	first:has-[+_:last-child]:after:content-['']
	last:after:content-['']
	last:before:content-['and_']
	only:last:before:content-['']
	"
>
	{ A list item }
</span>

Here it is in action 😎

Item 1 Item 2 Item 3 Item 4

Item 1 Item 2

Item 1