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属性的解决方案。

与其他答案不同，它通过在.collections-list元素之间的.collection中插入伪元素来回答您的问题，而不是将伪元素插入.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之间插入伪？

1 个答案: