Can't interpret this CSS selector: `footer:before`

Get Help CSS
#1

In the Paint Store project of the Web Dev foundations course, The following CSS is found:

footer:before { /* Overlay */
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  rgba(255, 128, 0, 0.75)
}

I couldn’t remember from the previous materials what a colon means in CSS selectors, so I looked it up on MDN and came to the CSS pseudo-classes section. However, there’s no :before pseudo-class on this page.
Using a web search engine, I came across the list of pseudo-elements - which does feature ::before, but on order to be a pseudo-element, it would need a double colon ::

So the :before is not a pseudo-class (doesn’t exist) and not a pseudo-element (missing a colon); then what is it?

#2

::before creates a pseudo-element that is the first child of the affected element. It is often used to add decorative content to an element using the content property. This element is inline by default.

Basically it serves to include some element before the referenced text in the class/id/element/etc

HTML

<q>Some text</q>, another, <q>next text.</q>

CSS

q::before {
  content: "«";
  color: blue;
}
q::after {
  content: "»";
  color: red;
}

Result

«Some text», another, «next text.»