Can someone explain in plain language about the ::after and ::before pseudo-elements. Is it possible?

Question

css

I know it's too easy. I myself understand, in principle, what they mean. Those. you insert something into the content property and it is displayed, depending on which pseudo-element we are referring to. If the flow of elements goes from top to bottom and each element is higher and higher (if we imagine the applicate - z), then we can visually imagine that they are going, as it were, closer and closer to us. These are ordinary elements and everything is clear with their positioning. And how are pseudo-elements visually superimposed? Let's say pictures (images). Please answer more clearly, at least in German. It is important for me to visualize what it looks like. I will sincerely welcome your answers and will be ready to be friends with you. Thanks in advance for your responsiveness.

Answer 1

Take it and try) https://codepen.io/DimaDolgoter/pen/oEoOJX?editors=1100