Menu
so I have been trying to find out for myself what the following code actually does to everyting, but I just haven't been able to fully understand.
/*Global Style*/
*,
*::before,
*::after{
margin: 0;
padding: 0;
box-sizing: inherit;
}
I copied it from a video and so it didn't really explain it all to me. If you can explain this code to me, I would highly appreciate it!
858
* is a global selector for all elements in an HTML file.
*::before inserts something before the content has selected
*::after inserts something after the content has selected
To answer your question, all the elements in the HTML will have 0 padding, 0 margins and box-sizing: inherit
*,
*::before,
*::after{
margin: 0;
padding: 0;
box-sizing: inherit;
}
Running example. Hopefully it made sense.
Reference: https://www.w3schools.com/cssref/sel_after.asp
Reference: https://www.w3schools.com/cssref/sel_before.asp
p::after {
content: " - Remember this";
background-color: yellow;
color: red;
font-weight: bold;
}
p::before {
content: " - Remember this";
background-color: pink;
color: red;
font-weight: bold;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>My name is Donald</p>
<p>I live in Ducksburg</p>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
