Pseudo class

The ::before and ::after pseudo-classes in CSS can be used to insert content before or after an element. They are often used to add decorative elements to a page or to create fancy formatting.

To use the ::before pseudo-class, you need to specify the content that you want to insert, as well as the element that you want to insert it before. For example:

.fancy-list li::before {
  content: "✦";
  color: purple;
}

This will insert a purple star symbol "✦" before each li element within an element with the class fancy-list.

The ::after pseudo-class works in a similar way, but inserts content after the specified element. For example:

.fancy-heading::after {
  content: "⌘";
  color: red;
}

This will insert a red apple symbol "⌘" after each element with the class fancy-heading.

You can also use the content property to insert more complex content, such as images or text. For example:

.fancy-image::before {
  content: url("image.png");
}

.fancy-text::after {
  content: "— Your Name";
}

Note that the content property must be used in conjunction with the ::before or ::after pseudo-class, and it is not a property of the element itself.