what does ::before really do?

Question

So I read the docs and probably understand the purpose of ::before and ::after. If my understanding is correct, they should always work in combinat

Answer 1

::before and ::after refer to CSS pseudo-elements that are created before and after matching elements.

Pseudo-elements are typically not shown in HTML element trees. However, if you are using the right kind of a debugging tool (like Chrome inspector) you can see these special elements. As its nowadays very common to style a page using pseudo-selectors, it is very useful to have a debugging tool that can display them.

To verify this behaviour from your Chrome inspector (or other capable tool), try adding some content to some of those pseudo-elements with CSS, for instance:

h1:before {
  content: 'before';
}