Существуют ли хоть какие-то преимущества в использовании :before / :after?
Лично я :before / :after пользовался когда изучал CSS. В своей практике никогда их не использовал. Всегда обходился, например, созданием и стилизацией span. Для себя я не нашёл ни единого преимущества в :before / :after. Я разработчик начинающий, наверняка что-то не понимаю.
before/after позволяет не засорять разметку ненужными тегами, для оформления можно использовать стили, а они как раз отвечают за оформление. К тому же, добавить иконку или какой-то декоративный текст (например лейбу "Скидка -50%") можно через псевдоэлемент и класс в разметке, так что остается только для товара с распродажи добавить класс, и через js такой класс удобно добавить, а не createElement/appendChild.. span вставлять.
Простой
