inline-block 直後を改行する

Question

CSSだけでは無理かもしれないのですが、もし出来る方法があれば教えていただきたいです。

まず前提で以下のようなHTMLがあります。

<h1>xxx</h1>
aaa<br>
bbb<br>
ccc

<h1>yyyyy</h1>
ddddd<br>
eeeee<br>
fffff

この構造を変えることはできません。
aaa や ddddd を p や div などで囲むことや h1 を div で囲むこと、 h1 の中に span を入れる等はできません。

h1 がある理由で inline-block になっています。
そのままだと aaa や ddddd が h1 のとなりに来てしまいますが、それをどうにか改行させて h1 が block であるような見た目にしたいです。

h1 が inline-block の理由ですが、
:before/:after を使い

***
xxx
***

*****
yyyyy
*****

のように上下に文字のサイズに合わせた背景を設定しているからです。
display: block; だと :before/:after を文字幅に合わせたwidthにできません。

ロード後に JS で処理するならどうにもできるのですが、出来る限りCSSのみで終わらせたいです。

何か方法ありますでしょうか？

Comments

[s8_chu]

aaaやbbbなどをspanタグなど汎用要素に入れることができない理由はあるのでしょうか？

[lazex]

はい。変えられる場所はCSSで、h1のinline-blockも上下に:before/:afterのデザインが再現可能ならinline-blockからblockにすることは可能です。

Answer 1

h1をdisplay: inline-block;ではなくで、display: table;にしたらどうですか？
ブロック要素であり、なおかつ横幅は文字列の長さになります。

Comments

[lazex]

ありがとうございます。問題ないかやってみたいと思います。

[lazex]

無事解決できました。
ありがとうございます。

Answer 2

h2 + *:before {
  content: " ";
  display:block;
}

こういうのじゃダメかな？

Comments

[lazex]

h2 は h1 のことですよね
h1 の次が エレメントならいいのですが、直接テキストノードなのでそのセレクタじゃ効果ないんです

[turbgraphics200]

あ、そうか。テキストノードか。でしたら無理かと思います。

[lazex]

やっぱ無理ですかー。
::outside があれば良かったのですがどのブラウザにも実装されず仕様からも消えてるんですよね・・・

[turbgraphics200]

残念ながら、テキストノード自体にはスタイルを当てられません。