Using the :required pseudo selector to enhance forms
Lately I come up with this idea on how to enhance a form by using the :required pseudo element. What you can do is mix this new pseudo element with the ‘+’ selector in order to modify elements that are adjacent to your input tag, such as the label.
Here’s an example:
input:required + label:after {
content: ' *';
color: black;
}
By this way you are able to dynamically append the classic ‘*’ to the labels that belongs to input tags with the required flag. Obviously you have to put the label after the input tag but then you can revert this structure by using some CSS float instructions.
Here’s the running example: