[解決済み】必須項目に赤いアスタリスクを追加する方法

質問内容

必須項目に赤いアスタリスクを付けたいのですが、どうすればいいですか？今のところ、この方法で試しています。

.required-field::before {
  content: "*";
  color: red;
  float: right;
}

<div class="required-field">Issued By:</div>
<input type="text" id="issuedBy">

しかし、問題はアスタリスクを右端に置きすぎてしまうことです。私は、テキスト "Status:" と "Issued By:" のすぐ隣に表示させたいと思っています。float属性を削除してみましたが、赤いアスタリスクがテキストの前に配置されてしまいます。

どうすればいいですか？

よりも ::before 使用 ::after を削除し float: right .

::before は、選択中の要素の前に擬似要素を配置します。 ::after は後に配置されるので、アスタリスクを目的の要素の前に置いて float/position で移動させるのではなく、自然に後に配置することができます。

アスタリスクが右に寄りすぎているのは、フローティングによって要素が親コンテナの右側に移動するためです（常に親要素とは限りませんので、詳しく説明したければ教えてください）。つまり、ラベルコンテナの右端、つまりテキストボックスの左側に移動するように指示したのであって、ラベルテキストの右側に移動したわけではありません。

https://jsfiddle.net/h4depmdf/1/

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