CSSのbefore,afterが効かない要素

投稿日: 更新日:

なんかハマったのでメモ。

inputタグにafterが効かんなぁ、と思ってたら、MDNを見ると次の様にあった。

メモ: ::before および ::after によって作成される擬似要素は要素の整形ボックスに含まれるため、 img や br のような置換要素には適用されません。

具体的にどの要素が「置換要素」か網羅したような情報はMDN上から見付けれなかったが、該当するのは先述のinputの他、imgタグやiframe,video,embed、その他だとbrとか子要素の無い要素が該当する模様。

参考

::before (:before) - MDN

置換要素 - MDN

関連するタグ

CSS, HTML