Jaki jest dobry sposób na przezwyciężenie niefortunnego faktu, że ten kod nie będzie działał zgodnie z oczekiwaniami:

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

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

W idealnym świecie, wszystkie wymaganeinputs dostanie małą gwiazdkę wskazującą, że pole jest wymagane. Takie rozwiązanie jest niemożliwe, ponieważ CSS jest wstawiany po treści elementu, a nie po samym elemencie, ale coś takiego byłoby idealne. Na stronie z tysiącami wymaganych pól mogę przesunąć gwiazdkę przed wejściem z jedną zmianą w jednej linii (:after do:before) lub mogę przenieść go na koniec etykiety (.required label:after) lub przed etykietą lub do pozycji w polu zawierającym itp. ...

Jest to ważne nie tylko w przypadku, gdy zmienię zdanie na temat tego, gdzie umieścić gwiazdkę wszędzie, ale także w dziwnych przypadkach, w których układ formularza nie pozwala na gwiazdkę w standardowej pozycji. Dobrze sprawdza się również w przypadku sprawdzania poprawności, które sprawdza formularz lub podkreśla nieprawidłowo ukończone kontrolki.

Wreszcie nie dodaje dodatkowych znaczników.

Czy są jakieś dobre rozwiązania, które mają wszystkie lub większość zalet niemożliwego kodu?