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

I had to change the markup like so, it is not possible to achive what I want without a < selector (which is not available yet):

<label class="xy-form-label" for="zipcode">
    <span class="mc-form-asterisk>Zip Code</span>
    <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 .xy-form-asterisk:after,
form.xy-form .xy-form-label-required:after {
    display: inline-block;
    color: grey;
    content: '\a0*';
}

Still not that bad I think. Nevertheless, thanks for your advice guys!