I’m stuck understanding this one. I modelled my survey form after the provided example, and I can’t figure out why tis bit of code is so critical in the beginning in order for the background image to show up:
*,
*::before,
*::after {
box-sizing: border-box;
}
body::before {
I’ve been pretty good at figuring this stuff out along the way, but I’m stumped by what this code does.
Link to site:
https://codepen.io/learntocodequickly/pen/ExgBMoW
::before and ::after are pseudo-element selectors. You can think of these pseudo-elements as being automatically generated when used, where ::before becomes the first child of the selected element and ::after becomes the last.
You can read more about them here:
Hi, so some general background info, ::before & :: after are what are known as pseudo-element selectors.
When you have say some code in a <div id="div_id"></div>
with #div_id::before {} whatever you add in the bracket show up positionally before the first child within the div.
with #div_id::after {} whatever you add in the bracket show up positionally after the last child within the div.
All of the above distinction between pseudo-elements are when they are in their default inline position. They are moot when you change the position property.
Now here is where things get interesting. You literally cannot have one single element where you got background-image, on top of which you place more text and such, and have the background image to be more transparent than the rest, cannot be done.
So body::before{} is a way to circumvent that limitation. Instead of directly telling the body to have a background-image. It creates a pseudo-element that is positionally the same size as the body, its parent. Then it fixes the position to be always the same regardless of scrolling, put a z-index to make sure it is lower than the body elements, add the background image with low opacity.
Edited for clarity and typos.
you mean the style? because inside the brackets after before
you can only add style as i think?
I would argue that this is not a good idea. The projects should be uniquely yours, not a copy or replica of the example that FCC provides.
The instructions state that yours should be functionally similar and to give it your own style.
When you try and replicate and take pieces of code from the sample you’re not getting your full, unique potential.
It’s a form. Forms are simple. Search for “html form elements” and you’ll see that there’s not all that much to a form. Styling…that’s something you can form in your mind. Why try and replicate something someone’s done when you’ll get more out of it when you form your own image of what you want user’s to see.
The first is just the normal “add box-sizing: border-box to everything” selector…
* {
box-sizing: border-box;
}
…extended to also include all elements with ::before or ::after pseudo-elements as they will not be selected by the universal selector.
*,
*::before,
*::after {
box-sizing: border-box;
}
Example of why we need to include *::before and *::after
The important part here is really the box-sizing.
The body::before selector is just used to add a background image to the page that is fixed without using background-attachment: fixed as that has/had some issues with mobile devices.
Hi, pseudo-elements are called that because they behave everything like an actual HTML element without being in the HTML code.
Therefore for your first question, What I meant was when you load the webpage, the before pseudo-element content would show up in front of the actual element itself.
For the second question, there is a property called content:"" that lets you add text, and background-image:"" property to add images.
For an example of what I mean, please visit the MDN documentation on ::before, specifically the “adding quotation marks” example which showcases the two pseudo-elements perfectly.
Thanks very much, really helpful.