如何在两个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 并用它绑定许多 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>

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

How to insert pseudo between two div?

html

css

pseudo-element