Что является хорошим способом преодоления неудачного факта, что этот код не будет работать должным образом:

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

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

В идеальном мире все необходимоеinputs получит маленькую звездочку, указывающую, что поле обязательно для заполнения. Это решение невозможно, так как CSS вставляется после содержимого элемента, а не после самого элемента, но что-то вроде этого было бы идеально. На сайте с тысячами обязательных полей я могу переместить звездочку перед вводом с одним изменением в одну строку (:after в:before) или я могу переместить его в конец метки (.required label:after) или перед этикеткой, или до положения на вмещающей коробке и т.д ...

Это важно не только в том случае, если я передумал о том, где разместить звездочку везде, но также и в нечетных случаях, когда макет формы не позволяет звездочке в стандартном положении. Это также хорошо работает с проверкой, которая проверяет форму или выделяет неправильно заполненные элементы управления.

Наконец, он не добавляет дополнительную разметку.

Есть ли хорошие решения, которые имеют все или большинство преимуществ невозможного кода?