仅在给定类的两个元素之间添加元素（使用css）

我想知道是否有可能在给定类的两个元素之间插入新元素。我只喜欢使用css，例如：

<div class="a">
<div class="a">

<div class="b">
<div class="b">
<div class="b">
<div class="a">

<div class="b">
<div class="a">

<div class="b">
<div class="a">

我想在“a”和“b”之间插入一个新元素（但不是相反）：

---

如果只需要元素之间的空间，请尝试以下操作：

.a + .b {
    padding-top: 50px;
}

---

如果您想获得更多控制权，请在之前使用以下命令：

.a + .b::before {
    content: '';
    display: block;
    height: 50px;
    background: green;
}

---

您可以使用

内容：

指令在html元素之前或之后添加内容（令人惊讶！）：

/* Add something after every .a div: */
.a:after {
    content: "whatever you want to add in here"
}

/* Add something before every .b div: */
.b:before {
    content: "whatever you want to add in here"
}

退房！请注意，您不能添加HTML元素——它们将显示为文本——但您可以添加目标元素的属性（有关详细信息，请参阅链接页面）

如果您只想在

.a

和

.b

div之间留出较大的空间，最好使用填充或边距：

.a + .b {
    padding-top: 100px;
}

---

CSS无法添加需要Javascript的HTML元素。但是，如果您只想添加空间，这是可能的。@Paulie\u D带有

内容
属性和
：：在
之前或
：：在
选择器之后，它可以。这是一个伪元素…用于样式设计而不是实际内容。您是想添加新元素还是仅仅换行？如果只查找换行符，也可以尝试此操作。@Paulie_D看起来OP只是添加了一个空行，即设置内容的样式。应该注意的是，
content
属性不能添加HTML，应该用于设置样式。它不应用于添加实际内容。添加该信息以澄清。
.a + .b {
    padding-top: 100px;
}