CSS Pseudo-elements

CSS Pseudo-elements are used to style specific parts of an element, such as the first letter, first line, or before/after content. Pseudo-elements are represented with a double colon (::) notation.

Some of the commonly used CSS Pseudo-elements are:

1. ::before: This pseudo-element is used to insert content before the selected element.

Example:

p::before {
  content: "Before text";
}

2. ::after: This pseudo-element is used to insert content after the selected element.

Example:

p::after {
  content: "After text";
}

3. ::first-letter: This pseudo-element is used to select the first letter of the selected element.

Example:

p::first-letter {
  font-size: 200%;
}

4. ::first-line: This pseudo-element is used to select the first line of the selected element.

Example:

p::first-line {
  font-weight: bold;
}

5. ::selection: This pseudo-element is used to select the portion of the text that is currently being highlighted by the user.

Example:

::selection {
  background-color: yellow;
  color: black;
}

CSS Pseudo-elements can be used to add decorative or functional elements to a webpage without the need for extra HTML markup.