Html 是否可以仅使用CSS在两个段落之间放置DIV？

我想我不能在CSS中做这个，但我想看看是否有人会有这样的解决方案

我有一个包含页面内容的div，一个可以位于HTML中几个不同位置的div，以及一组段落。CSS必须在两段之间放置第二个div

有一个示例HTML：

<div id="to-be-placed">Move Me</div>
<div id="content">
  <p>P1</p>
  <p>P2</p>
  <p>P3</p>
  <p>P4</p>
  <p>P5</p>
</div>

但我真的没有办法告诉CSS将我的DIV移动到那个位置

注意：要放置的#div可以位于#content div的开头或结尾

请注意，不要给出硬编码的尺寸和位置。那不行

---

顺便说一下，以防你对jQuery感到兴奋。我知道如何使用jQuery。所以不，我不需要你给我这样的答案。（对于那些想知道的人，请参见。）

这不能使用CSS来完成，因为CSS不提供任何在HTML中移动元素的机制，仅用于设置现有元素的样式和通过使用伪元素添加新内容。最好的解决方案是使用JavaScript或jQuery

---

如果只想添加样式化文本内容，可以在CSS中的伪元素之后使用

：：添加，但它不支持HTML，只支持纯文本：


p:n子级（2）：：之后{
内容：“-添加内容”；
}

P1

P2

P3

P4

P5

您不能准确地做到这一点，但一种可能的解决方法是将div定义为第3个p元素上的：：after元素。从技术上讲，这会将div放在p中，但它可能会满足您的需要

p:nth-child(3)::after {
    content: "Move Me";
    display: block;
}

这里有一个小问题：
简短的回答：不，你不能这么做。CSS（层叠样式表）是为样式设计的。它不是用来操作DOM元素的。另一方面，JavaScript就是为此而构建的。因此，如果您碰巧想使用CSS来操纵DOM，那么您可能需要重新思考解决方案的方法。
我们如何决定将其放置在何处？我知道。它可以在第3款或第5款之后。这部分是硬编码的。是的，不幸的是我的DIV也会包含HTML标签。。。虽然在我的例子中没有显示，但事实上，当我看照片时，感觉好像有东西在移动。。。我猜他们主要使用左/右浮动和其他一些类似的技巧。他们在禅宗花园里做的事情真是太棒了。但它们都是实验性的。但是，如果CSS开始操纵DOM，那么我想它会偏离它存在的实际目的。
p:nth-child(3)::after {
    content: "Move Me";
    display: block;
}