0

This is a question that has been asked many times but my question is different, so please do not mark it as duplicate.

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

I understand what is happening in line 1. But I dont understand what is line 2. In line 2, "before" and "after" are pseudo elements. They need a "content" property. But I see all this missing here and it seems like these pseudo elements are being used for a different purpose.

Can someone please explain line 2.

Praj
  • 49
  • 1
  • 5
  • Every element, `:before` of every element, `:after` of every element have `box-sizing: inherit` property - which means that each and all of them inherit `box-sizing` from parent. If you won't specifically set box-sizing for some element - everything will have `box-sizing: border-box` – fen1x Jul 25 '17 at 05:17
  • This is a duplicate of at least one other question, but if you didn't find it, it's probably because it had a terrible title, so I've improved the title. The fact that box-sizing is set to inherit in a separate rule in your question shouldn't matter, but if it bothers you I'm happy to reopen your question and answer it anyway. – BoltClock Jul 25 '17 at 05:26
  • @BoltClock, yes it is a duplicate. Thanks for pointing out and the other question helped me understand. – Praj Jul 26 '17 at 15:04

0 Answers0