Why are pseudo elements used in this CSS?

1

The aim of this code is to set the box-sizing on all elements to border-box.
I don’t understand why the universal pseudo elements *:before and *:after are needed in this code. I figured * would be enough.

It’s taken from the practice section from the lesson on the Box Model in Shay Howe’s HTML&CSS guide.

/*
  ========================================
  Grid
  ========================================
*/

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

Thanks for any help.