CSS example of adding asterisks to form-required options

When making a Web page form, if an option is required, an asterisk is usually added to the option, such as WordPress's comment form:

<p class= "Form-group" >
<label for= "Author" > Name </label> <span class= "required" >*</span>
<input type= "text" id= "author" name= "author" required= "Required" "size=" class= "Form-text" >
</p>

Then add a little CSS style to the asterisk:

. Form-group span.required {
Color: #999;
font-size:150%;
}
CSS add asterisks to form required options

But sometimes we may not be able to modify the HTML structure, or do not want to add extraneous meaningless tags, then we can use the CSS after pseudo class to create an asterisk.

Or the top of the form, delete <span class= "required" >*</span> this code, and then add CSS:

. Form-group Label:after {
Content: ' * ';
Color: #999;
font-size:150%;
}

This allows you to create an asterisk that represents a required selection by using CSS.

In fact, CSS before and after pseudo class is very easy to use, most people just take it to clear floating, in fact, the brain open a bit, take advantage of these two pseudo class can make very magical things.