O que é uma boa maneira de superar o infeliz fato de que esse código não funcionará como desejado:

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

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

Em um mundo perfeito, todos são necessáriosinputs obteria o pequeno asterisco indicando que o campo é obrigatório. Esta solução impossível, já que o CSS é inserido após o conteúdo do elemento, não depois do elemento em si, mas algo como isso seria ideal. Em um site com milhares de campos obrigatórios, posso mover o asterisco na frente da entrada com uma alteração para uma linha (:after para:before) ou posso movê-lo para o final do rótulo (.required label:after) ou na frente da etiqueta, ou para uma posição na caixa de contenção, etc ...

Isso é importante não apenas no caso de eu mudar de idéia sobre onde colocar o asterisco em todos os lugares, mas também para casos estranhos em que o layout do formulário não permite o asterisco na posição padrão. Ele também funciona bem com a validação que verifica o formulário ou destaca os controles concluídos incorretamente.

Por último, não adiciona marcações adicionais.

Existem boas soluções que tenham todas ou a maioria das vantagens do código impossível?