Why use :root and *, *::before, *::after

[fluffer]

Hi there, I’m currently doing the project for Survey Form and am trying to understand CSS the code for the solution.
Link : https://codepen.io/freeCodeCamp/full/VPaoNP

1. What’s the use for the code below? I didn’t see any :before/:after for any element. Can we just put box-sizing: border-box;inside body?
   And what’s the asterisk meaning for *, *::before and *::after?

*, 
*::before, 
*::after {
  box-sizing: border-box; 
}

2. Why do we use :root here? We can immediately put the colors with its rgba form inside each element as there’s no changes? Or am I missing out something?

I appreciate your explaination and sorry for asking so much all at once

[jonathan.roley]

::before and ::after are pseudo elements. You can learn about them here.

:root is basically referring to the html element that wraps everything inside it. The variables held inside it make it easy to quickly change colors, if all the elements use colors referenced from them.