title: Using CSS, how to add a pseudo element before every odd child element that is "outside" of that child element?
body: <p>I want to create a grid with two columns whose width will be equal. My base HTML code looks like this:</p>
  
  <pre><code>&lt;div class="linkgrid"&gt;
    &lt;div class="gridentry"&gt;
      &lt;a href="#"&gt;Loooooooooooooong&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="gridentry"&gt;
      &lt;a href="#"&gt;Short&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="gridentry"&gt;
      &lt;a href="#"&gt;Meeeedium&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In this example, the first and the second <code>gridentry</code> should lie in the the first row. The thrid <code>gridentry</code> should lie in the second row. All <code>gridentry</code>s should have the same width.</p>
  
  <p>~~~</p>
  
  <p>I came up with a solution that uses a CSS table. However, to make sure the row "breaks" after every second cell, it currently requires non-semantic elements to force these "row breaks":</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.linkgrid {
    display: table;
    border-spacing: 2px;
    table-layout: fixed;
    width: 50%;
  }
  
  .gridentry {
    display: table-cell;
    background-color: red;
    padding: 5px;
    text-align: center;
  }
  
  .gridentry a {
    color: white;
  }
  
  .THIS-SHOULD-BE-A-PSEUDO-ELEMENT-BEFORE-EVERY-ODD-CHILD {
  /* I imagine a selector that looks somewhat like this:
  .linkgrid .gridentry:nth-child(odd):outsidebefore {
  */
    display: table-row;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="linkgrid"&gt;
    &lt;span class="THIS-SHOULD-BE-A-PSEUDO-ELEMENT-BEFORE-EVERY-ODD-CHILD"&gt;&lt;/span&gt;
    &lt;div class="gridentry"&gt;
      &lt;a href="#"&gt;Loooooooooooooong&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="gridentry"&gt;
      &lt;a href="#"&gt;Short&lt;/a&gt;
    &lt;/div&gt;
    &lt;span class="THIS-SHOULD-BE-A-PSEUDO-ELEMENT-BEFORE-EVERY-ODD-CHILD"&gt;&lt;/span&gt;
    &lt;div class="gridentry"&gt;
      &lt;a href="#"&gt;Meeeedium&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there a way to remove my <code>&lt;span&gt;</code>s from my HTML (because they do not have any semantics) and use a clever CSS selector that adds them as pseudo elements at the right positions instead?</p>
  
  <p>I do know that <code>:before</code> will "create" a pseudo-element <em>within</em> the selected element. Is there a non-JavaScript, CSS-only way to add a pseudo-element <em>outside</em> of the selected element like required in this example?</p>
  
  <hr>
  
  <p><strong>Another edit:</strong> For all those familiar with the Chrome developer tools, I want my result to look somewhat like this in the DOM tree:</p>
  
  <pre><code>&lt;div class="linkgrid"&gt;
    ::outsidebefore
    &lt;div class="gridentry"&gt;
      &lt;a href="#"&gt;Loooooooooooooong&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="gridentry"&gt;
      &lt;a href="#"&gt;Short&lt;/a&gt;
    &lt;/div&gt;
    ::outsidebefore
    &lt;div class="gridentry"&gt;
      &lt;a href="#"&gt;Meeeedium&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>...where the <code>::outsidebefore</code> pseudo-elements should have the CSS property <code>display: table-row;</code>.</p>
  
  <hr>
  
  <p><strong>Update 2016-01-04:</strong> While this specific question remains unanswered, my original problem was solved another way: <a href="https://stackoverflow.com/a/34588007/1560865">https://stackoverflow.com/a/34588007/1560865</a></p>
  
  <p>So please only post replies to this question that answer precisely the given question.</p>