[css]要素にbr的な改行を加える方法

知ってると地味に役に立つ

ほしい状況

例えばこんなのがあったとする。

<h1><span>本気</span><small>ガチ</small></h1>

<span>と<small>を改行して2行にしたい。でもhtmlに<br>を入れられない。
それぞれにdisplay:block;を与えたら2行というか2段になるけど、それはしたくない。どうにかできないか、という状況。

できる。

解決策

こうする。

h1 span::after{
    content: "\A";
    white-space: pre;
}

もしくはこうする。

h1 span + small::before{
    content: "\A";
    white-space: pre;
}

どっちが良いかは状況次第だと思う。

ちなみに「\A」じゃなくて「\a」でも大丈夫。

疑似要素を使わなきゃいけないのがめんどくさいなーって気持ちもあるといえばあるけど、それぞれにblockを指定する方がよく考えたらダルい。こっちの方がいいと思う。