Почему псевдоэлементы так называются

Псевдоэлементы называются так, потому что они позволяют стилизовать определенные части элемента, не создавая дополнительных HTML-тегов. Они "псевдо", так как не существуют в DOM, а создаются и управляются исключительно через CSS.

Например:

p::first-line {
  color: red;
}

Здесь ::first-line — псевдоэлемент, применяющий стиль к первой строке абзаца, хотя в разметке этой строки отдельно нет.

Основные отличия от псевдоклассов:

• Псевдоэлементы (::before, ::after, ::selection) работают с частями элемента.
• Псевдоклассы (:hover, :nth-child) описывают состояния или позиции элемента.

Двойное двоеточие (::) — современный синтаксис (CSS3), но для совместимости допустимо и одинарное (:).