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.