Кто-нибудь объясните на понятном языке о псевдоэлементах ::after и ::before. Это возможно?

Знаю, что это слишком легко. Я и сам понимаю, в принципе, что они означают. Т.е. в свойство content вставляешь что нибудь и это отображается, в зависимости к какому псевдоэлементу обращаемся. Если поток элементов идет сверху-вниз и каждый элемент все выше и выше (если представить аппликату - z), то можно визуально представить, что они идут, как бы все ближе и ближе к нам. Это обычные элементы и с их позиционированием все ясно. А как визуально накладываются псевдоэлменты? Допустим картинки (изображения). Прошу, ответьте более понятно, хоть на немецком. Для меня важно визуально представить, как это выглядит. Буду искренне рад вашим ответам и буду готов дружить с вами. Заранее, спасибо за отзывчивсть.