title: CSS before and after selector inside div
body: <p>I am trying to use after and before selectors to apply certain style to children of a div, my code is as follows :</p>
  
  <pre><code>&lt;div class="outer-container"&gt;
      &lt;a href="#" class="links"&gt;Link 1&lt;/a&gt;
      &lt;a href="#" class="links"&gt;Link 2&lt;/a&gt;
      &lt;a href="#" class="links"&gt;Link 3&lt;/a&gt;
      &lt;span class="mid-divider"&gt;Some Text&lt;/span&gt;
      &lt;a href="#" class="links"&gt;Link 4&lt;/a&gt;
      &lt;a href="#" class="links"&gt;Link 5&lt;/a&gt;
      &lt;a href="#" class="links"&gt;Link 6&lt;/a&gt;
      &lt;span class="last-divider"&gt;Some Text&lt;/span&gt;
      &lt;a href="#" class="links"&gt;Link 7&lt;/a&gt;
      &lt;a href="#" class="links"&gt;Link 8&lt;/a&gt;
      &lt;a href="#" class="links"&gt;Link 9&lt;/a&gt;
  &lt;/div&gt;
  
  .outer-container .mid-divider::before{
      //some styles
  }
  .outer-container .mid-divider::after{
      //some styles
  }
  </code></pre>
  
  <p>I want to apply styles to link1, link2 and link3 as well as to links7,8 and 9. But the selector is not working.</p>