Pseudo elements of CSS.

 

Pseudo-elements in CSS are used to style parts of an element's content without adding any markup to the HTML. They are represented by double colons (::) and allow you to create styles that are not directly part of the document's source code.

Here are some common pseudo-elements in CSS:

1. ::before - allows you to insert content before an element
2. ::after - allows you to insert content after an element
3. ::first-letter - allows you to style the first letter of an element
4. ::first-line - allows you to style the first line of an element
5. ::selection - allows you to style the text that is currently selected by the user

Here is an example of how you can use the ::before and ::after pseudo-elements to add some decorative content to an element:

 

 

Hello, world!

.decorated-text {
  position: relative;
}

.decorated-text::before,
.decorated-text::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  background-color: red;
}

.decorated-text::before {
  left: 0;
}

.decorated-text::after {
  right: 0;
}

This code will add two red dots to the left and right of the "Hello, world!" text. The ::before and ::after pseudo-elements are positioned absolutely and centered vertically using top, bottom, and margin:auto. The content property is set to an empty string to create the decorative content, and the width and height properties are set to control the size of the dots. The background-color property is used to set the color of the dots.