我有以下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>