仅在div的第一行设置span样式

Question

我有以下html:

<div class="pp">TWO <span>WORDS</span>
</div> 

例如，我想用"@"来分隔它们，但前提是它们在同一行。我不想使用任何JS，只想使用CSS。

这不起作用：

.pp{
    width:20%;
}
.pp::first-line  span:before{
    content: " @ "
}

我无法想出另一个主意。

请注意，我希望同一个元素有或没有@，这取决于它是否出现在同一条车道上。例如

TWO @ WORDS

但是

TWO
WORDS

根据窗口的大小，当20%不能容纳两个@单词时，单词会出现在第二行，然后我希望"@"消失

Answer 1

最明显的解决方案是使用两个跨度（文本应该在文本标记中，而不是在文本节点中）。

然后，您可以针对第二个子级并使用:before。

.pp {
  width: 20%;
}
.pp span:nth-child(2):before {
  content: '@';
}

<div class="pp">
  <span>TWO</span>
  <span>WORDS</span>
</div>
<div class="pp">
  <span>ONE</span>
</div>