Add Asterisk to the end of a <label>

Question

Is it possible to add an asterisk to the end of the textstring within <label>?

This is what I have, but the asterisk (of course) is displayed behind the whole label:

<label class="xy-form-label-required" for="zipcode">
   Zip Code
   <span class="xy-form-labelinfo">
       Allowed characters a-z A-z 0-9 ,.-
       Could also be an information about the field...
   </span>
</label>

My CSS Code:

form.xy-form .xy-form-label-required:after {
    color: grey;
    content: ' *';
}

---

This is the result:

Zip Code
Allowed characters a-z A-z 0-9 ,.-
*

This is what I want to achive without changing the html markup.

Zip Code *
Allowed characters a-z A-z 0-9 ,.-

Answer 1

you can simply add the following CSS code instead

.xy-form-label-required > span.xy-form-labelinfo:before{
  color: grey;
  content: " *";
}

Answer 2

Typo apart, you want the asterisk before the info label:

.xy-form-label-required .xy-form-labelinfo:before{
    color: grey;
    content: ' *';
}