Trying to add generated-content to HTML form fields: Demo

This is a demo page for this blog post.

Objective

What I am trying to do is use HTML like this (I'm removing a bunch of stuff for brevity)...

<input required />

... and CSS like this...

input[required]::before {
	content: '*';
	position: absolute;
	top: 0;
	left: 1em;
	color: red;
}

... to get something that looks like this...
Trying to use generated-content with html form fields

... without having to resort to JavaScript or extraneous mark-up. But this doesn't seem reliably possible, in any modern browser...

Attempt

Try viewing this form in your favorite browser. The HTML is beside the form element, and the CSS used is (essentially) that which is displayed above.

In the latest versions of Firefox, Safari, Opera, and IE, you will see absolutely nothing is added to the page via the above CSS. In the latest Chrome you will see the generated-content, but only for radio, checkbox, progress, color and file input types, all of which I assume are oversights on the Chrome devs' part, since no other types allow it, and no other browser allows it at all...

Ideally each of these form fields would have a "required" indicator using just CSS Indicates required fields.

<input required />
<input type="text" required />
<input type="radio" required />
<input type="checkbox" required />
<input type="email" required />
<input type="url" required />
<input type="search" required />
<input type="tel" required />
<input type="number" required />
<input type="range" required />
<input type="date" required />
<input type="month" required />
<input type="week" required />
<input type="time" required />
<input type="datetime" required />
<input type="datetime-local" required />
<input type="color" required />
<select required>...</select>
<textarea required></textarea>
<input type="password" required />
<input type="file" required />
<input type="submit" required />
<input type="reset" required />
<input type="button" ... required />
<input type="image" ... required />