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:

Allowed characters az Az 0-9 ,.-
*

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

* *
Allowed characters az Az 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: ' *';
}

Answer 3

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!

Answer 4

You are adding asterix after element, not Text node. To achieve effect that you want you would need to use javascript ie something like this: http://jsbin.com/udiroz/2/edit But I wouldn't go this way.

Don't know if this is possible in your case but I would recommend to change the markup to something like this: http://jsbin.com/udiroz/1/edit In my opinion label is not a good place for additional informations like what chars are allowed, or not, validation errors, etc.