title: What does *:before and *:after do in css
body: <p>I researched on SO about <code>*</code><strong>(Asterisk)</strong> and I have found that it selects all elements and applies styles to them.</p>
  
  <p>I followed this link, <a href="https://stackoverflow.com/questions/1204275/what-does-an-asterisk-do-in-a-css-selector">Use of Asterisk</a> and I noticed that this code will apply <code>border</code> to all of the elements.</p>
  
  <pre><code>* {
   border: 1px solid red;
  }
  </code></pre>
  
  <p>Now, my concern is that what does <code>*:before</code> and <code>*:after</code> do in CSS?</p>
  
  <pre><code>*:before,
  *:after {
            box-sizing: border-box;
  }
  </code></pre>