Déjà, on doit mettre « ::before » et plus « :before ».

"before" et "after", tout comme "first-letter", "first-line" et "selection" sont des pseudo-éléments. Ils ciblent des choses dans la page.

Les choses comme "hover", "focus", "active", "not" ou encore "lang" sont des pseudo-classes. Ils changent en fonction du contexte : click, focus, langue, de la page ou du lien ou si une checkbox est cochée ou pas… Ces derniers prennent un seul « : ».

Ensuite, ::before et ::after peuvent s’appliquer sur tous les éléments qui disposent d’un contenu. Cela comprend tous les éléments HTML à l’exception des éléments auto-fermantes comme img, input, br…

Ils peuvent enfin être stylisés comme on veut en CSS. On peut tout faire avec, y compris des hover et d’autres effets.