Adding a red asterisk to required fields

I am wanting to add a red asterisk for my required fields. So far I have tried using this:

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

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

But the problem is it keeps putting the asterisk too far right. I want it to be right next to the text "Status:" and "Issued By:". I tried removing the float attribute, but it then places the red asterisk in front of the text.