Where do ::before and ::after sit in the flow?

Both pseudo-elements, ::before and ::after, are child elements of the selected node and by default sit inside the element, but outside its main text:

• ::before is inserted before the element's content
• ::after is inserted after the element's content

At the same time, they:

• participate in the flow as regular inline elements, unless display is changed
• are not rendered without content
• can be turned into blocks, absolutely positioned, etc., if the corresponding properties are set

Summary: both pseudo-elements sit inside the element in the DOM flow, but around its main content: ::before before it, ::after after it.