Using CSS, how to add a pseudo-element before each odd-numbered child that is "outside" this child?

Question

I want to create a grid with two columns whose width will be equal. My basic HTML code is as follows:

<div class="linkgrid">
  <div class="gridentry">
    <a href="#">Loooooooooooooong</a>
  </div>
  <div class="gridentry">
    <a href="#">Short</a>
  </div>
  <div class="gridentry">
    <a href="#">Meeeedium</a>
  </div>
</div>

In this example, the first and second gridentryshould be in the first line. The stroke gridentryshould be in the second line. All gridentryshould have the same width.

~~~

I came up with a solution that uses a CSS table. However, to make sure that the row breaks after every second cell, it currently requires non-semantic elements that force these row breaks:

.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;
}

<div class="linkgrid">
  <span class="THIS-SHOULD-BE-A-PSEUDO-ELEMENT-BEFORE-EVERY-ODD-CHILD"></span>
  <div class="gridentry">
    <a href="#">Loooooooooooooong</a>
  </div>
  <div class="gridentry">
    <a href="#">Short</a>
  </div>
  <span class="THIS-SHOULD-BE-A-PSEUDO-ELEMENT-BEFORE-EVERY-ODD-CHILD"></span>
  <div class="gridentry">
    <a href="#">Meeeedium</a>
  </div>
</div>

Run codeHide result

<span> HTML ( ) CSS, ?

, :before "" . , JavaScript, CSS, , ?

---

:. , Chrome, , DOM:

<div class="linkgrid">
  ::outsidebefore
  <div class="gridentry">
    <a href="#">Loooooooooooooong</a>
  </div>
  <div class="gridentry">
    <a href="#">Short</a>
  </div>
  ::outsidebefore
  <div class="gridentry">
    <a href="#">Meeeedium</a>
  </div>
</div>

... ::outsidebefore CSS display: table-row;.

---

2016-01-04: , -: qaru.site/questions/1622556/...

, , , .

Answer 1

3 display: contents:

, - . , , .

:

• .
• display: contents
• ::before ::after

, , .

.wrapper {
  display: contents;
}
.wrapper:nth-child(odd)::before {
  content: '';
  display: table-row;
}

.linkgrid {
  display: table;
  border-spacing: 2px;
  table-layout: fixed;
  width: 50%;
}
.wrapper {
  display: contents;
}
.wrapper:nth-child(odd)::before {
  content: '';
  display: table-row;
}
.gridentry {
  display: table-cell;
  background-color: red;
  padding: 5px;
  text-align: center;
}
.gridentry a {
  color: white;
}

<div class="linkgrid">
  <div class="wrapper">
    <div class="gridentry">
      <a href="#">Loooooooooooooong</a>
    </div>
  </div>
  <div class="wrapper">
    <div class="gridentry">
      <a href="#">Short</a>
    </div>
  </div>
  <div class="wrapper">
    <div class="gridentry">
      <a href="#">Meeeedium</a>
    </div>
  </div>
</div>

Hide result

display: contents , Firefox.

Answer 2

- . , .
, width:50% , , , 50% , , 50% ; .

.linkgrid {
  display: table;
  border-spacing: 2px;
}
.gridrow {                     /* new */
  display: table-row;
}
.gridentry {
  display: table-cell;
  background-color: red;
  padding: 5px;
  text-align: center;
  width: 50%;                  /* moved */
}
.gridentry a {
  color: white;
}

<div class="linkgrid">
  <div class="gridrow">
    <div class="gridentry">
      <a href="#">Loooooooooooooong</a>
    </div>
    <div class="gridentry">
      <a href="#">Short</a>
    </div>
  </div>

  <div class="gridrow">
    <div class="gridentry">
      <a href="#">Meeeedium</a>
    </div>
  </div>
</div>

Hide result