Submodule 9.2: The CSS of forms

You may have noticed that usually, the required fields of a form have an asterisk after the title. 

In order to create that we create a div and give it a class ( in this case the class is "required"). This div includes all the other elements. 

In the CSS, we call the class required and then depending on the element that includes the title we write the appropriate expression. 

Notice that here we use the expression element:after. :after belongs to CSS Pseudo Elements. One use of these elements is to insert content before or after an element.

The CSS rules:

.required label:after { content:"*"; }
.required p:after { content:"*"; }
/*...*/
<div class="required">
  /*The label and input elements*/
<div>

will create a page displayed as: