css - 跨度显示块也在跨度下降后生成文本

Question

HTML：

<p>
<a href="#">my 
<span>favorites</span>
</a>
(13)
</p>

我希望“收藏夹”在“我的”之后删除，然后单独设置“（13）”样式，它应该与“收藏夹”在同一行。

我尝试使用上述标记和以下 CSS，但 (13) 也下降了：

p span a { display: block; }

(13) 应该与“收藏夹”保持在同一行，所以看起来像

my
favorites(13)

Answer 1

这个怎么样？

<a href="#">my<br>favorites<span>(13)</span></a>

更长的版本（更大的灵活性）

如果您不想要换行符，则可以使用块元素。现在，由于内联元素 ( ) 中不允许使用块元素<a>，因此您应该使用 span 标签并将它们设置为块元素。

<a href="#">
    my
    <span class="second-line">
        favorites <span class="count">(13)</span>
    </span>
</a>

和CSS：

a .second-line {
    display: block;
}
a .count {
    color: #888888;
}

Answer 2

这对你有用吗？

<p>
<a href="#">my 
<p>favorites <span>(13)</span></p>
</a>

</p>