[解決済み] CSSを使ってフォームの入力に「必須項目」のアスタリスクを自動的に追加する

質問

このコードが思うように動かないという残念な事実を克服する良い方法は何でしょうか。

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

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

完璧な世界では、すべての必須 input には、そのフィールドが必須であることを示す小さなアスタリスクが表示されます。CSSは要素自体の後ではなく、要素の内容の後に挿入されるので、この解決策は不可能ですが、このようなものがあれば理想的です。何千もの必須フィールドがあるサイトでは、1行の変更でアスタリスクを入力の前に移動させることができます( :after から :before ) あるいは、ラベルの最後に移動させることもできます ( .required label:after ) 、ラベルの前、コンテナボックスの位置など。

これは、アスタリスクをどこに置くかについて私が考えを変えた場合だけでなく、フォームレイアウトが標準的な位置にアスタリスクを置くことを許さない奇妙なケースのためにも重要なことです。また、フォームをチェックしたり、不適切に記入されたコントロールを強調するバリデーションとも相性がよいです。

最後に、追加のマークアップを追加しないことです。

不可能コードの利点のすべて、あるいはほとんどを備えた良い解決策はないのでしょうか？

どのように解決するのですか？

それは、あなたが考えていたことですか？

http://jsfiddle.net/erqrN/1/

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

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

.required:after {
  content:" *";
  color: red;
}

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

参照 https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements