Используйте CSS для автоматического добавления звездочки «обязательное поле» для формирования входных данных

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

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

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

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

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

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

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