我有以下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%不能容纳两个@ WORDS时,取决于窗口的大小,WORDS进入第二行,然后我希望“ @”消失

最佳答案

最明显的解决方案是使用两个跨度(无论如何,文本都应该在文本标签中,而不是文本节点)。

然后,您可以定位第二个孩子并使用: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>

10-07 18:57
查看更多