CSS pseudo-elements are used to style specific parts of an element. They allow you to style elements based on their content or position in the document without adding extra markup to the HTML. Pseudo-elements are denoted by double colons (::) preceding the element name.

1. ::before and ::after:

These pseudo-elements allow you to insert content before or after an element’s content, respectively.

Example:

<div class="box">Content</div>

.box::before {
      content: "Before";
      color: red;
    }
.box::after {
      content: "After";
      color: blue;
    }

2. ::first-line and ::first-letter:

These pseudo-elements allow you to style the first line or the first letter of a block-level element, respectively.

Example:

<p>This is a sample paragraph.</p>

p::first-line {
      color: red;
      font-weight: bold;
    }
p::first-letter {
      font-size: 150%;
    }

3. ::selection:

This pseudo-element allows you to style the portion of text selected by the user.

Example:

<p>Select this text to see the effect.</p>

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

4. ::marker:

This pseudo-element is used to style the marker of a list item.

Example:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

 li::marker {
      content: "•"; /* Custom marker */
      color: red;
    }

5. ::placeholder:

This pseudo-element is used to style the placeholder text in an input field or textarea.

Example:

<input type="text" placeholder="Enter your name">

 input::placeholder {
      color: gray;
      font-style: italic;
    }