Использование псевдоэлементов ::after и ::before является одним из самых популярных приёмов при вёрстке фрагментов веб-страниц и их стилизации. С их помощью можно выводить произвольный текст, добавлять тени, треугольники, линии и др.
Фактически, ::after и ::before заменяют собой два обычных элемента в коде HTML, к которым можно добавлять любое стилевое оформление. Но поскольку мы всё делаем через CSS, то в полной мере сохраняется принцип разделения содержания и оформления. Тем самым, код HTML остаётся простым и чистым, а дизайн элементов возлагается на CSS.