A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

• Style the first letter, or line, of an element
• Insert content before, or after, the content of an element

Ex: Say you want to bold the first letter of the paragraph

Without using Pseudo-element selectors, you must make a span class and style that class:

<!-- Without using Pseudo-element selectors -->
<style>
  /* Style specific class */
  .first-letter {
    font-size: 140%;
    font-weight: bold;
  }
</style>

<p>
  <span class="first-letter">L</span>orem ipsum dolor sit, amet consectetur  adipisicing elit. Non quos est exercitationem tempora, possimus, iste a  tempore odit corporis ipsa doloremque fuga veniam repellat esse provident sit  dicta, dolorem dignissimos.
</p>

Thanks to Pseudo-element selectors, the previous step is unnecessary.

Instead, you should use :: to indicate a Pseudo-element:

/* style first letter of each <p> */
p::first-letter {
  font-size: 140%;
  font-weight: bold;
}

/* style first line of each <p> */
p::first-line {
  font-weight: bold;
}

/* Style the background color of cursor selection */
::selection {
  background-color: pink;
}

/* insert a Pseudo-element before <p> */
p::before {
  content: "...";

  /* set it to block element that takes the entire block */
  display: block;
}

CSS Pseudo-elements