脱力系備忘録BloG ホーム »Pタグにafter疑似要素を指定したら途中でタグが終了する不思議

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

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

この記事へのコメント

コメントの投稿

非公開コメント

コメントは全て管理人が内容を確認してから表示されます(非公開コメント除く)。
内容によっては表示されない場合がありますことご了承願います。

プロフィール

お問い合わせ

最新記事

最新コメント

▲ Pagetop