What's the purpose of these CSS rules?

* 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>


It's to nullify standard distances that are given from HTML standards.

<p> will, as an example, automatically give a margin above and below, and body have a padding per standard. As a graphic designer, I curse that and wants to begin from scratch, building elements up from nothing, instead of having to override every single element.

box-content is a little harder to explain, but box-content: border-box should, IMHO, be the standard. It means that padding is counted into the width/height of an element. Normally, if you got width: 100px and padding: 10px, the elements width is (100+10+10=) 120 pixels, but with box-content: border-box, the width is 100 pixels. inherit inherits the same value as the parent element, so if body has, in another declaration, box-content: border-box, all other elements will share the same value, unless otherwise stated.

Tags:

Css

Recent Posts