::after and ::before are pseudo elements and they insert the style after or before the element correspondingly.
For your question with *::after and *::before is used to manage appearing spaces. If you don't, the box-sizing is content-box and you'll see the difference (even can't see by our eyes) in spacing.
You can get more information about box-sizing here.
To me, this seems obsolete because the * selector will already tag all elements.
No. * selector will only select the real selector that are in DOM-Tree.
Here's a picture I made for you using before and after pseudo element can insert element like this:

Pseudo elements are outside the DOM-Tree. So, using *
won't select them:
