html - 如何在两个div之间插入伪？

Question

当我将伪元素插入到 div 元素时，我遇到了一个棘手的情况。这是我的 html 结构。

<div class="collections-list">
  <div class="collection">...</div>
  <div class="collection">...</div>
  <div class="collection">...</div>
  (where I want to put the pseudo element)
  <div class="collection">...</div>
  ...
</div>

我想做的是添加一个具有 {content: ''} 和其他样式的伪元素。我试过使用 css 选择器:

div.methods-collections-lander div.collection:nth-child(3n)::after

但这会将伪元素插入到 div .collection 中。我不想创建一个元素并将其添加到 div 之间，因为我确实想更改 DOM 并用它绑定(bind)许多 js 函数。

是否可以使用 css 来做到这一点？

Answer 1

这是一个使用 flexbox 的解决方案和 order 属性。

与其他答案不同，这通过在 .collection 元素之间插入一个伪元素到 .collections-list 来回答你的问题，而不是将伪元素插入到一个 .collection div.

.collections-list {
  display: flex;
  flex-direction: column;
}

.collections-list::after {
  content: 'Pseudo';
  order: 1;
}

.collection:nth-child(n+4) {
  order: 2; /* the 4th and onward .collection elements have a higher order */ 
}

<div class="collections-list">
  <div class="collection">1</div>
  <div class="collection">2</div>
  <div class="collection">3</div>
  <div class="collection">4</div>
  <div class="collection">5</div>
</div>