Search code examples
cssstylesheet

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

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

Solution

  • * 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