Purpose of *:before, *:after rule without content property

From what I understand, :before and :after inserts content before or after the indicated target. I'm not really sure what would be the purpose of this CSS snippet?

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

Solution 1:

That applies border-box sizing to all elements as well as any :before and :after pseudo-elements that they may generate. The *:before, *:after portion means the respective pseudo-elements of any element.

Once you create specific :before/:after rules later in your stylesheet, this declaration will apply automatically to all of those pseudo-elements, so you don't have to repeat it in every single one of your pseudo-element rules. In other words, the cascade works exactly the same way for pseudo-elements as it does with actual elements: when you have separate rules matching the same thing, as long as they match, they will all be applied.

Note that in order for an element to actually generate a :before or :after, its content must be something other than none. By itself, the CSS that you have given will not cause every element to automatically generate both pseudo-elements; it just ensures the browser will use border-box sizing if it does need to render any of them. See the spec for how generated content works.

For example, the following CSS:

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

div:after {
    content: "hello";
}

results in a div's :after pseudo-element having border-box sizing. No other elements generate :after pseudo-elements, but should more CSS rules be introduced they will all have the same box-sizing from the universal rule.

Note also that box-sizing: border-box without the -moz- prefix should appear in the given CSS so other browsers will apply the same box sizing as well. The -moz- prefix is used by Firefox up to version 28 (the just-released version 29 ships with unprefixed box-sizing). See this answer.