Geek Answers Handbook

Add Asterisk to the end of <label>

Is it possible to add an asterisk to the end of a text string inside <label> ?

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

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

My CSS code is:

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

This is the result:

Postcode
Allowed characters az Az 0-9, .-
*

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

Postal Code *
Allowed characters az Az 0-9, .-

+4
source share
4 answers

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

 <label class="xy-form-label" for="zipcode"> <span class="mc-form-asterisk>Zip Code</span> <span class="xy-form-labelinfo"> Allowed characters az Az 0-9 ,.- Could also be an information about the field... </span> </label>

My CSS code is:

 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 so bad, I think. However, thanks for your advice guys!

+2
source

instead, you can simply add the following CSS code

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

Unlike others, before the information label you want to get an asterisk:

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

You add an asterix after the element, not the text node. To achieve the effect you need, you will need to use javascript, that is, something like this: http://jsbin.com/udiroz/2/edit But I would not go that way.

I don’t know if this is possible in your case, but I would recommend changing the markup to something like this: http://jsbin.com/udiroz/1/edit In my opinion, the shortcut is not a good place for additional information, for example which characters are allowed or not, validation errors, etc.

0
source

More articles:


All Articles