I am building a project for freecodecamp’s CSS certification. Its the second project, a survey form. Where in the sample form that the website shows you, I encountered something new to me. (Kindly check the image attached)
I understand the before and after psuedo classes and their functions. However what I don’t understand is;
1 - The use of ::before with ( * ) this star symbol.
2- The use of ::before with the body.
3- The use of border-boxing with ( , *::before and ::after )
I know its not necessary for me to use all this to pass my project. But when I encounter something new, I just cannot move on without understanding it. So I seek the help of you expert programmers. Thank you so much.
* in css selector means everything, and , means and. So this selector:
*, *::before, *::after {}
can be read as: everything, the before pseudo-element of everything, and the after pseudo-element of everything has the following property: box-sizing:border-box;
This brings us to the question of what is a border-box. By now you’ve probably encountered how HTML/CSS treates a block element by default. The content is wrapped in padding, then border, then margin, like below:
Without the box-sizing:border-box property, by default CSS calculates height/width of an element using the CONTENT only.
However, when you set the property to have a value of border-box, CSS includes the PADDING and BORDER in the height/width calculation.
What problem does that solve you may ask? Border-box model is a much more intuitive way of understanding how your element would look, and it makes things easier when you are trying to fit one element into another.
Now finally on to body::before, this is telling CSS that the before pseudo-element of the body element should have the included properties within the curly brackets.
Here’s some reading on box-sizing, personally one of my favorite web design properties.
