title: Universal selector * and pseudo elements
body: <p>Does the universal selector <code>*</code> affect pseudo elements like <code>:before</code> and <code>:after</code>?</p>
  
  <p>Let me use an example:</p>
  
  <p>When doing this: </p>
  
  <pre><code>* { box-sizing: border-box; }
  </code></pre>
  
  <p>...doesn't the above declaration automatically include/affect pseudo elements like <code>:before</code> and <code>:after</code> as well?</p>
  
  <p>Or, in order to affect pseudo elements like <code>:before</code> and <code>:after</code>, one has to declare this?</p>
  
  <pre><code>*, *:before, *:after { box-sizing: border-box; }
  </code></pre>
  
  <p>Does this make sense?</p>
  
  <hr>
  
  <p>I have always used just <code>* { box-sizing: border-box; }</code> and never have had any issues with pseudo elements whatsoever. But I see many tutorials doing <code>*, *:before, *:after</code> but they never really explain why they include <code>*:before, *:after</code> in the declaration.</p>