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>