Разница между псевдоэлементами ::before и ::after при создании CSS-форм заключается в их расположении:

• ::before по умолчанию располагается перед содержимым элемента, для которого задаётся. 5
• ::after — после. 5

Эта разница отражена в названии псевдоэлементов: слово before переводится с английского как «до» или «перед», а after — «после». 5

Псевдоэлементы ::before и ::after используются для вставки контента впереди или позади основного текста, не вмешиваясь в HTML-структуру страницы. 1