文字の両端に線を引く場合のロジックについて

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プロパティを外したり変更してみたり試してみましたが、うまく動きませんでした。

どなたかロジックを解説していただけないでしょうか？

m.ts10806

2018/07/31 01:36

それぞれ外したり変更してみたり試してみたのでしょうか。

sonu

2018/07/31 01:37

試しました

m.ts10806

2018/07/31 01:49 編集

すみません。聞き方悪かったですね。「試した結果」をきちんと書かないと、ご自身がどこまで理解しているかというところが分かりませんので、質問本文に追記してください。(現在の内容だと試したことすら分かりません)それに自身で組まれたのですよね？意図したものではないのですか？自身で組まれたものでないのでしたら出展を明示してください。　https://teratail.com/help/question-tips#questionTips2-1 >今置かれている状況を整理し、わかっている範囲とわからない範囲を明確にしましょう

m.ts10806

2018/07/31 01:54 編集

「うまく動作しない」「うまくいかない」では何が起きているか伝わりませんので、試してみたこととそれに対して起きた現象を具体的に記載してください。

sonu

2018/07/31 01:54

申し訳ありません。本文に追記しました。ご助言感謝します。「意図したものではないのですか？」という質問はタイトルにある通り、CSSで描画された結果云々ではなく、なぜ上手く描画されるのかの「ロジック」を知りたいのです。

m.ts10806

2018/07/31 01:55

自分で書いたのであればロジックを知りたいというのはおかしいですよ。目的を達成するために入れた指定であるはずなので。

行動規範の内容に同意します

回答1件

ベストアンサー

relativeについて

h1要素はblock要素です。
それに対して、疑似要素beforeで設定している線もblock要素で描画されています。
block要素は"常に前後で改行される"ようなイメージで考えられるとわかりやすいと思います。
ということは、relative(beforeのabsoluteも)を設定しない場合、h1の前に幅100%の線が引かれ、改行した後にh1の文字が表示されます。
＿＿＿＿＿＿＿＿＿＿＿
Lorem Ipsum
こんな感じ。

relativeは要素を重ね置きする際に設定するプロパティです。
relativeを指定する事で、h1要素の上に疑似要素を置く事が出来る様になります。
その為の設定がbeforeのposition:absoluteで、これを指定しないとやっぱり線はh1の上に表示されます。

ちなみに、beforeのabsoluteのみが設定されていると、h1要素に被らないように改行されるので疑似要素は下に押し出されて線が引かれます。
この際、h1の下に線が表示されます。
Lorem Ipsum
￣￣￣￣￣￣￣￣￣￣￣
こんな感じ。

inline-blockについて

h1のbeforeによって、幅が100%に設定されています。
ここでdisplay:blockを指定すると、デフォルトでは箱の大きさはh1の大きさ＝幅100%になります。
widthを手動で指定すれば期待する動作も可能ですが、inline-blockにすることでデフォルトを文字列の幅にすることができます。
なので、display: block; ではなく、display: inline-block;でないといけないわけではなく、
実際はdisplay: block;でも実装は可能です。
inline-blockの方が楽で良いよね、ということですね。

投稿2018/07/31 02:05

編集2018/07/31 02:28