css - 使用CSS，如何在每个奇数子元素之前添加一个伪元素，即该子元素的 "outside"？

Question

我想创建一个包含两列且宽度相等的网格。我的基本 HTML 代码如下所示:

<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>

在这个例子中，第一个和第二个 gridentry应该在第一行。第三gridentry应该在第二排。全部gridentry s 应该具有相同的宽度。

~~~

我想到了一个使用 CSS 表格的解决方案。但是，为了确保每第二个单元格后行“中断”，目前需要非语义元素来强制这些“行中断”:

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

有没有办法删除我的 <span> s 来 self 的 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 更新:虽然这个具体问题仍未得到解答，但我原来的问题已通过另一种方式解决:https://stackoverflow.com/a/34588007/1560865

因此，请只发布准确回答给定问题的此问题的回复。

Answer 1

显示级别 3 介绍 display: contents :

The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.

然后，您可以:

1. 将每个单元格包裹在一个容器元素中
2. 为这些容器设置display:contents
3. 向这些容器添加::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>

请注意 display: contents 尚未得到广泛支持，但可以在 Firefox 上运行。