CSS勉強中です。
ブログ本文中の見出しを作っていたのですが、背景にマークを書きたくなりまして。
こういう感じにしたくなったので、
<body>
<h1>なにかものすごい見出し</h1>
</body>
h1 {
display: inline-block;
position: relative;
margin: 75px 5px;
z-index: 0;
}
h1::before {
content: "";
position: absolute;
background: #a0e7ff;
width: 150px;
height: 150px;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
こんな風にしました。
結果は上の画像の通りになったので、早速使おうと思ったのですが……
まぁ、当然inline-blockでインラインにしてあるので、前後に文章があるとこうなっちゃうわけですよ。
でも見出しなので前後に改行を設けてほしかったのです。
かと言ってdisplay:block要素にしてしまうと幅が100％になってしまうので、後ろの円が文字の見出し文の真ん中ではなくて画面の真ん中に来てしまうんですよね。
見出し文は不定なので、あらかじめwidthを指定することもできず…。
つまり、幅がコンテンツに合わせて変形し、かつブロックのような要素がほしいわけです。
必死にinline-blockの前後に改行を挟む方法などを調べましたがよくわかりませんでした。
しかし、display:tableというスタイルを見つけました。
これを指定すると、インライン要素のように幅はコンテンツに合わせますが、ブロック要素のように前後に改行されるようになります（だいぶ適当な説明）です。
本来はテーブルのようなレイアウトを作るときに使いますが、今回の目的にぴったりだったので使用してみました。
さきほどのCSSのdisplayをdisplay: tableに変更します。
すると
おお、イメージ通りになりました。
ありがとう、display:table。
つ、つかれた……もっと簡単にできる方法があったら教えてほしい……