Pタグにafter疑似要素を指定したら途中でタグが終了する不思議
2020/03/28 Sat.
Pタグに「after」疑似要素セレクタを指定したらPタグ内に書かれたブロックタグの直前で強制的にPタグが閉じられるというよくわからない挙動に悩まされたのでメモしておきます。
PタグとDIVタグにafter疑似要素を指定した時の挙動が異なります。
[CSS]
[HTML]
上記を表示させると
[Pタグ]
[DIVタグ]
と表示されます。
DIVタグの表示になるのが予想通りなのですが、Pタグはなぜか「float」が効いていない。
挙動を調べてみたら、PタグはPタグ内の「DIV」要素の直前に「::after」疑似要素が来て強制的に「P」タグが閉じている。
つまり、Pタグ内の「DIV」はPタグの外に存在することになっている。
なぜだろう？
と思って調べてみたら、Pタグはブロックタグを内包できないという文法上のルールがあるということを今更ながらに知りました。
「このポンコツブラウザ！」と思ったけど、ポンコツは自分でした。
■■おさらい■■
「P」と「DIV」タグはどちらも「ブロック要素」。
「P」タグは「段落」を表す要素で、タグ内に「インライン要素」しか書けない文法上のルールがある。
「DIV」タグは特に意味がなく、グループを形成する要素として使われる。タグ内に何でも書ける。
[CSS]
.test::after {
display: block;
font-size: 0;
height: 0;
content: ".";
clear: both;
}
.test span {
display: inline-block;
width: 100px;
float: left;
}
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>
<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
この記事へのコメント
コメントの投稿
コメントは全て管理人が内容を確認してから表示されます（非公開コメント除く）。
内容によっては表示されない場合がありますことご了承願います。
内容によっては表示されない場合がありますことご了承願います。
![【Amazon.co.jp限定】『ゴジラ-1.0』 豪華版 3枚組 （Amazon限定：アクリルスタンド+ビジュアルシート付き、メーカー特典：名セリフステッカー付き) [Blu-ray]](https://m.media-amazon.com/images/I/81Sg1SwkmiL._AC_SL1500_.jpg)
