`*` selector in CSS

[claudiaF]

So this is the Learn Responsive Web Design by Building a Piano - Step 10 description:

Now that you have reset the html box model, you need to pass that on to the elements within as well. To do this, you can set the box-sizing property to inherit, which will tell the targeted elements to use the same value as the parent element.
You will also need to target the pseudo-elements, which are special keywords that follow a selector. The two pseudo-elements you will be using are the ::before and ::after pseudo-elements.

and this is the error showing if I only use the * selector:

You should have a *, ::before, ::after selector.

I am not really having a problem, more of a curiosity. I don’t understand why I should add the selectors ::before and ::after if I am already targeting all elements of the page with *. Doesn’t * include also ::before and ::after by default?

Thanks to anyone who can dedicate their time here.

[DobarBREND]

Welcome to our community!

The * selector targets all elements, but if I add for example some text before a ‘p’ element:

p::before { 
  content: "Read this -"; ....this is the text that will be added before p element
  background-color: yellow;
  color: red;
  font-weight: bold;
}

this new content is not targeted by the * selector, but with the ::before selector at the moment it inserts something (pseudo-element) before the p element. When it happens the box-sizing: inherit; will be applied generally. You don’t have to add this property to every selector such as: element::before { }. The same applies to the ::after.