html
1<h1><span>Lorem Ipsum</span></h1>
css
1h1 { 2 position: relative; 3 text-align: center; 4} 5h1::before { 6 content: ""; 7 position: absolute; 8 display: block; 9 top: 50%; 10 left: 0; 11 width: 100%; 12 height: 1px; 13 background-color: #000; 14} 15h1 span { 16 position: relative; 17 display: inline-block; 18 background-color: #fff; 19}
上記のソースコードは文字の両端に線を引く場合の一例ですが、なぜspan要素に、position:relative; を指定しなければ動かないのか、
そして何故、display: block; ではなく、**display: inline-block;**でないと動かないのかが分かりません。
CSSプロパティを外したり変更してみたり試してみましたが、うまく動きませんでした。
どなたかロジックを解説していただけないでしょうか?
それぞれ外したり変更してみたり試してみたのでしょうか。
試しました
すみません。聞き方悪かったですね。「試した結果」をきちんと書かないと、ご自身がどこまで理解しているかというところが分かりませんので、質問本文に追記してください。(現在の内容だと試したことすら分かりません)それに自身で組まれたのですよね?意図したものではないのですか?自身で組まれたものでないのでしたら出展を明示してください。 https://teratail.com/help/question-tips#questionTips2-1 >今置かれている状況を整理し、わかっている範囲とわからない範囲を明確にしましょう
「うまく動作しない」「うまくいかない」では何が起きているか伝わりませんので、試してみたこととそれに対して起きた現象を具体的に記載してください。
申し訳ありません。本文に追記しました。ご助言感謝します。「意図したものではないのですか?」という質問はタイトルにある通り、CSSで描画された結果云々ではなく、なぜ上手く描画されるのかの「ロジック」を知りたいのです。
自分で書いたのであればロジックを知りたいというのはおかしいですよ。目的を達成するために入れた指定であるはずなので。
回答1件
あなたの回答
tips
プレビュー