Pタグにafter疑似要素を指定したら途中でタグが終了する不思議

2020/03/28 Sat.

Pタグに「after」疑似要素セレクタを指定したらPタグ内に書かれたブロックタグの直前で強制的にPタグが閉じられるというよくわからない挙動に悩まされたのでメモしておきます。

PタグとDIVタグにafter疑似要素を指定した時の挙動が異なります。

[CSS]

.test::after {
  display: block;
  font-size: 0;
  height: 0;
  content: ".";
  clear: both;
}
.test span {
  display: inline-block;
  width: 100px;
  float: left;
}

[HTML]

<P class="test">
<span>あいうえお</span>
<div>かきくけこ</div>
</P>

<DIV class="test">
<span>あいうえお</span>
<div>かきくけこ</div>
</DIV>

上記を表示させると

[Pタグ]

あいうえお
かきくけこ

[DIVタグ]

あいうえおかきくけこ

と表示されます。

DIVタグの表示になるのが予想通りなのですが、Pタグはなぜか「float」が効いていない。
挙動を調べてみたら、PタグはPタグ内の「DIV」要素の直前に「::after」疑似要素が来て強制的に「P」タグが閉じている。
つまり、Pタグ内の「DIV」はPタグの外に存在することになっている。

なぜだろう？
と思って調べてみたら、Pタグはブロックタグを内包できないという文法上のルールがあるということを今更ながらに知りました。

「このポンコツブラウザ！」と思ったけど、ポンコツは自分でした。

■■おさらい■■
「P」と「DIV」タグはどちらも「ブロック要素」。
「P」タグは「段落」を表す要素で、タグ内に「インライン要素」しか書けない文法上のルールがある。
「DIV」タグは特に意味がなく、グループを形成する要素として使われる。タグ内に何でも書ける。

関連記事

category: HTML・CSS

コメント: 0