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

Question

[Андрей Dobrin]

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

Answer 1

[Дима Долготер]

Возьми и попробуй) https://codepen.io/DimaDolgoter/pen/oEoOJX?editors=1100

Comments

[ink]

поправьте ваш ответ в codepen

[Дима Долготер]

ink, там все верно. Картинку типа вставил.

А вообще туда модно иконки ставить. Например от fontawesome просто загуглить
Fontawesome in before

[Варлам Ерофеич]

Дима Долготер, на моём хроме срабатывает только при

content: url(//pp.userapi.com/c824600/v824600365/ba3b7/bo-Kx3kaC48.jpg);

Answer 2

[Ankhena]

Псевдоэлементы мало чем отличаются от обычных элементов, кроме того, что не существуют в DOM.
Они добавляются соответственно до или после основного содержимого блока.
Специально пример без стилей (только рамочки для видимости) пустого и не пустого блоков https://jsfiddle.net/y8jpbgax/
т.е. это тоже самое, как если бы вы в начале и в конце div'а написали бы 2 span'а.

А как визуально накладываются псевдоэлменты?

А дальше как зададите, так и наложатся. Опять же визуально без разницы, span'ы (или div'ы) это были или псевдоэлементы.

Answer 3

[Одиночка Айс]

>А как визуально накладываются псевдоэлменты? Допустим картинки (изображения).

Чаще всего св-во content оставляю пустым, издеваясь над псевдоэлементами как захочу, в том числе навешивая background.

Answer 4

[Варлам Ерофеич]

- Здесь есть все описания
(и картинки и блочное содержимое и текст - всё с примерами)