匹配元素的CSS规则后面没有特定类的另一个元素

Question

我有一个类似的问题，但与它不同…

在我的情况下，我有以下布局：

<span class="title">Title1:</span>
<span class="content">Content1</span>
<span class="title">Title2:</span>
<span class="content">Content2</span>
<span class="title">Title3:</span>
<span class="content">Content3</span>
<span class="title">Title4:</span>
<span class="content">Content4</span>

显示如下：

标题1:内容1

标题2:内容2

标题3:内容3

标题4:内容4

借助以下CSS

span.title{
font-weight: bold;
}
span.content::after {
content: "a";
white-space: pre;
}

但是，在这种情况下，第一个span.title将是孤儿，后面不是span.content，而是另一个span.title。在这种特殊情况下，我希望孤立的span.title在它自己的行中。。。所以它将是这样的：

Oprhan标题

标题1:内容1

标题2:内容2

标题3:内容3

标题4:内容4

什么是正确的规则来涵盖：not((情况？

我试过很多变体，比如下面的，但似乎不起作用。。。

span.title::after + :not(span.content) {
content: "a";
white-space: pre;
}

提前感谢！

编辑：基本上，我想得越多，就越怀疑CSS无法解决这个问题。。。+操作员选择元素后，而不是前…

Answer 1

可以在下一行之前添加换行符，而不是在孤立标题之后。

span.title{
font-weight: bold;
}
span.content::after {
content: "a";
white-space: pre;
}
span.title + :not(span.content)::before {
content: "a";
white-space: pre;
}

<span class="title">Orphan Title</span>
<span class="title">Title1:</span>
<span class="content">Content1</span>
<span class="title">Title2:</span>
<span class="content">Content2</span>
<span class="title">Title3:</span>
<span class="content">Content3</span>
<span class="title">Orphan Title2</span>
<span class="title">Orphan Title3</span>
<span class="title">Title1:</span>
<span class="content">Content1</span>
<span class="title">Title2:</span>
<span class="content">Content2</span>
<span class="title">Title3:</span>
<span class="content">Content3</span>