::before ::after CSS Pseudo Elements

The ::before pseudo-element adds content that appears before an element, and therefore the ::after pseudo-element adds content that appears after an element. This allows you to add elements such as icons or symbols to your code using just CSS.

The syntax of the ::before pseudo-element uses double colon.

selector::before {
	// CSS rules
}

The pseudo-element can be used to add an asterisk symbol to highlight required fields on forms. The content property is required for both the ::before and ::after pseudo-elemnt to add the element needed.

.form-label::after{
  content:'*';
  color: red
}