CSS pseudo-classes and pseudo-elements

Pseudo-classes are states applied to the selected elements. They have a single colon (:).

button:hover {
  background: red;
}

Pseudo-elements selects specific parts of the selected elements. They have double colons (::).

p::first-line {
  text-transform: uppercase;
}