What does *:before and *:after do in css

Question

I researched on SO about *(Asterisk) and I have found that it selects all elements and applies styles to them.

I followed this link, Use of Asterisk and I noticed that this code will apply border to all of the elements.

* {
 border: 1px solid red;
}

Now, my concern is that what does *:before and *:after do in CSS?

*:before,
*:after {
          box-sizing: border-box;
}

Answer 1

Like their name said it, :before & :after are used to apply css properties JUST before/after the content WITHIN the matching element.

One day, a wise man said 'One fiddle is worth thousands words', so :

div {
  border: solid 1px black;
  padding: 5px;
  }

div:before {
  content: "Added BEFORE anything within the div!";
  color:red;
 }

div:after {
  content: "Added AFTER anything within the div!";
  color:green;
 }

<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>

Answer 2

:before selector inserts something before the content of each selected element(s). :after selector inserts something after the content of each selected element(s).

so *:before like Dan White said would be before all elements and *:after will be after all elements