Could someone please explain :before and :after?

[Aurora17]

I have seen this a few times, and while I have looked it up, I still don’t understand how it works. If someone could please explain in the context of this (https://codepen.io/freeCodeCamp/pen/VPaoNP) or this (Multiple Borders | CSS-Tricks), preferably with visuals, that would be really helpful. I’m pretty new to this so simple terms would be great.
Thank you.

[MatchaCrisp]

so to lay some foundations, ::before and ::after are pseudo-elements. They are added as a way to style specific parts of an element.

::before creates a pseudo-element that is the first child of the selected element. Given an element:

<style>
#focus::before {
   content:'salsa';
}
#focus::after {
   content:'yum';
}
</style>
<div id="focus">
  <p id="child1">cheesecake</p>
  <img id="child2" src="salsa_cheesecake.jpg" alt="cheesecake made with salsa">
</div>

The browser will render the words “salsa” before the #child1 and #child2.

But in the case of ::after, a pseudo-element is created as the last child of the element. So in the example, ‘yum’ is displayed after the #child2 img.

Now on to your requested examples of FCC survey Form. Here in body::before everything is serving one purpose: to create a background image for the webpage. The question then is why not simply add background-image to body itself? The reason is in that case, you cannot alter the background image very much without it influencing every children of body.

Let’s break body::before down:

/* used so browser does render the pseudoelement instead of skipping it*/
content: ''; 
/*bypass the restriction of ::before being placed as a child of body
by setting the pseudoelement position relative to the viewport, 
starting from top left corner and stretching the entire page*/
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
/*so the overlapping pseudoelement is behind the children*/
  z-index: -1;
/*backup in case image does not load*/
  background: var(--color-darkblue);
/*background image and its settings*/
  background-image: url();
background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

I have made a small codepen to illustrate the above points.