Was ist ein guter Weg, um die unglückliche Tatsache zu überwinden, dass dieser Code nicht wie gewünscht funktioniert:

<div class="required">
    <label>Name:</label>
    <input type="text">
</div>

<style>
    .required input:after { content:"*"; }
</style>

In einer perfekten Welt ist alles erforderlichinputs würde das kleine Sternchen erhalten, das anzeigt, dass das Feld erforderlich ist. Diese Lösung ist unmöglich, da das CSS nach dem Elementinhalt eingefügt wird, nicht nach dem Element selbst, aber so ähnlich wäre es ideal. Auf einer Site mit Tausenden von erforderlichen Feldern kann ich den Stern vor der Eingabe mit einer Änderung in eine Zeile verschieben (:after zu:before) oder ich kann es an das Ende des Etiketts verschieben (.required label:after) oder vor dem Etikett oder an eine Stelle auf dem Umkarton usw ...

Dies ist nicht nur für den Fall wichtig, dass ich meine Meinung darüber ändere, wo das Sternchen überall platziert werden soll, sondern auch in seltenen Fällen, in denen das Formularlayout das Sternchen nicht in der Standardposition zulässt. Es spielt auch eine gute Rolle bei der Validierung, bei der das Formular überprüft oder nicht ordnungsgemäß ausgefüllte Steuerelemente hervorgehoben werden.

Schließlich wird kein zusätzliches Markup hinzugefügt.

Gibt es gute Lösungen, die alle oder die meisten Vorteile des unmöglichen Codes bieten?