7

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; }
Improve this question
7
  • 1
    It adds to everything border-box so the width of the element takes into consideration padding and border. In this context i guess you took it from a css reset right ? Commented May 8, 2014 at 13:05
  • With that code in the width you specify to elements padding and border is included as well. Commented May 8, 2014 at 13:06
  • @PatsyIssa But it makes no sense here. the * adds this to all elements. So there is no need to :before or :after Commented May 8, 2014 at 13:06
  • @Xatenev True. I can only see the option that the writer wanted to really make sure the style is applied to everything (even though only the firt selector was needed). Commented May 8, 2014 at 13:07
  • 4
    Before and after don't inherit box-sizing from the parent Commented May 8, 2014 at 13:08

3 Answers 3

Reset to default
7

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

It applies to all the elements with all the pseudo elements (:before, :after), and it makes them use border-box box sizing.

For more information about box-sizing check here: http://css-tricks.com/box-sizing/

The border-box value makes the final rendered box the declared width, and any border and padding cut inside the box.

Improve this answer

Comments

-2

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

This is for not to repeat in all places where you use :after and :before. It automatically adds to all :after and :before.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.