Use CSS to add an asterisk instance share to the form's required options

When creating a Web page form, if an option is required, you will usually add an asterisk to the options below, by sharing with you the way to add asterisks to your form by using CSS, you need a friend's reference, and I hope to help you.

When making a Web form, if an option is required, an asterisk is usually added to the option, such as Typecho'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>

Example:

* Name

Then add a little CSS style to the asterisk:

. form-group span.required {    color: #999;    font-size:150%;}

For example:

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

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

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

This makes it possible to create an asterisk that represents a mandatory selection via CSS.

In fact, the CSS before and after pseudo-class is very useful, most people just take it to clear floating, in fact, the brain hole, good use of these two pseudo-class can make a very magical thing.