Adding a red asterisk to required fields
Hey you are floating the asterisk to right
instead use
.required-field::after {
content: "*";
color: red;
margin-left:2px
}
You are using pseudo ::before selector which is placing the content before the element. Use pseudo ::after to place it after the element.
Rather than ::before
use ::after
and remove the float: right
.
::before
places a pseudoelement before the element you're selecting. ::after
will place it after, so rather than putting the asterisk before the element you want and moving it with a float/position you can just place it after naturally.
The reason the asterisk was moved too far to the right is because floating moves the element to the right side of the parent container (not always the parent element, let me know if you want me to elaborate). So by floating right you were telling it to move to the far right of the label container which means just to the left of the text boxes, and not to the right of the label text.
https://jsfiddle.net/h4depmdf/1/
.required-field::after {
content: "*";
color: red;
}