Detailed explanation of CSS to add asterisks to required form options

Adding an asterisk to a form means a required field. We have actually seen this function a lot. In this article, we will take a look at an example of adding an asterisk to a required form item using CSS. I hope it can help everyone. .

<script>ec(2);</script>

When making a web form, if an option is required, you usually add an asterisk to the option, such as the WordPress comment form:

<p class="form-group">
   <label for="author">姓名</label> <span class="required">*</span>
   <input type="text" id="author" name="author" required="required" size="30" class="form-text">
  </p>

Then add a little bit to the asterisk CSS style:

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

CSS adds an asterisk to the required form options

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

Still with the form above, delete the * code, and then add CSS:

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

This way you can create it through CSS An asterisk indicates a required selection.

In fact, the before and after pseudo-classes of CSS are very easy to use. Most people just use them to clear floats. In fact, if you use your imagination and make good use of these two pseudo-classes, you can do amazing things.

Related recommendations:

Comprehensive summary of attribute value inheritance knowledge in CSS

Comprehensive methods of customizing text omission in pure CSS

Detailed explanation of CSS paragraph properties

The above is the detailed content of Detailed explanation of CSS to add asterisks to required form options. For more information, please follow other related articles on the PHP Chinese website!