How does *, *:after, *:before work?

Question

I have seen the following in some stylesheets and, I am ashamed to say but I do not know what that stands for and how it works, I only know how it affects the website in browser preview, could you please try and explain this ?:

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

I also used it in a my website cause apparently, with this, my website arranges better in page with it but I added a flexible grid gallery and if I have the above code in my CSS, it automatically puts a padding in between my images, if I remove it, it doesn't.

That is the main reason I am curious about it :)

Thank you

PS:

Also , it seems that if I remove the :

 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;

...I fix the space between the images problem...hmm

Answer 1

* is CSS selector for all elements.

But remember you should use ::before, and ::after.

This:

div::before,
div::after{
    content: "text";
}

create two pseudo elements in every div. Like this:

<div>
    <::before>text</::before>
    Ordinary content of div.
    <::after>text</::after>
</div>

http://codepen.io/Chovanec/pen/FhvaK

Answer 2

It is a part of the element you don't normally see, but you can style it. Common examples are the little arrow element.

E.g.

p:after {
    content: "AFTER!";
}

HTML:

<p>Some sentence</p>
<p>Some sentence too</p>

Will display as :

Some sentenceAFTER!
Some sentence tooAFTER!

jsfiddle: http://jsfiddle.net/Tn7GQ/

And as for the asterisk(*), it means everything literally. As div > * means every child of element div