title: CSS - repeat a before insert every nth ajacent element
body: <p>I have a structure such as :</p>
  
  <pre><code>&lt;div class='container'&gt;
      &lt;div class='half-screen'&gt;&lt;/div&gt;
      &lt;div class='half-screen'&gt;&lt;/div&gt;
      &lt;div class='half-screen'&gt;&lt;/div&gt;
      &lt;div class='half-screen'&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have to add divs dynamically and I'm wondering if there's a way to create the relationship dynamically so that a bar is inserted before every two divs with the half-screen class, i.e. before every 2n+1 div.half-screen.</p>
  
  <p>There may be other ways to restructure and use css for top-border on each half screen but I'm curious to know if I can solve this using the + css adjacent operator</p>
  
  <pre><code> .container {
    &amp;.half-screen + .half-screen + .half-screen {
  
      &amp;:before {
        border-top: 1px solid #ccc;
        display:block;
      }
    }
  }
  </code></pre>