before, after といった疑似要素は単一の HTML タグに装飾を加える場合非常に便利。

ところが全てのタグに対して疑似要素が使えるわけではないので、例えば img タグに疑似要素を使おうとすると途端に思った描画がされず、驚いた人も少なくないかと。

本記事ではこれについてまとめておきます。

疑似要素が効かない HTML タグ

まず HMTL5 のタグで疑似要素が効かないものは以下の通り

• br
• wbr
• canvas
• embed
• object
• audio
• iframe
• img
• video
• input
• textarea
• select
• legend
• button
• details
• fieldset

2021年8月17日加筆：button タグのコードに閉じタグが無かったため CodePen で正しい表記が出来ていませんでした。legend, button, details, fieldset には疑似要素が有効です。

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”mdWwgrd” default_tab=”html,result” user=”yat8823jp”]See the Pen before by YAT (@yat8823jp) on CodePen.[/codepen_embed]

疑似要素が使えないものはどう分類されているか調べているうちに、置換要素は疑似要素が適用できないということを目にしたので、単純に置換要素はすべて疑似要素が適用できないと感じたのですが、深く調べていくとそういうことじゃない気づいたので、そのあたりの考察を書いていきます。

置換要素とは

そもそも置換要素が何かというと MDN Web Docs に

CSS において、置換要素は CSS のスコープの外で表現される要素です。 CSS の整形モデルとは独立して表現される外部オブジェクトです。

もっと簡単な言葉で言い換えれば、コンテンツが現在の文書のスタイルに影響されない要素です。置換要素の位置は CSS を使用して変更することができますが、置換要素自身のコンテンツは違います。

出典： 置換要素：MDN Web Docs

とあります。

これはドキュメント（本文）にオブジェクトを埋め込むために置き換えられる要素が置換要素であり、例えば img の場合だとタグが確保する領域を src 属性に指定した画像ファイルで置き換えます。

疑似要素が適用できない置換要素

HTML5 における置換要素は以下の通り

• iframe
• video
• embed
• img
• option
• audio
• canvas
• object

出典 15.4 Replaced elements: HTML Standard, 置換要素: MDN Web Docs

ですが、option には疑似要素が適用されるため「置換要素=疑似要素が適用されない」とはならないですね

尚これらは要素内のコンテンツ位置を制御するプロパティのみを持った要素になります。

画像

img 要素は内存的寸法（固有の高さ、固有の幅、固有のアスペクト比）により置換要素として扱われます。また、画像の読み込みが行われない場合に表示される alt 属性のテキストも置換要素として扱われます。

フォーム系

image 型 input 要素は置換要素になりますがそれ以外のフォームコントロールは input も含め非置換要素となります。しかし input 要素や textarea などには疑似要素が適用されず、ここでも 「置換要素=疑似要素が適用されない」とはならないです。

埋め込みコンテンツ

iframe, video, embed はドキュメントに異なるリソースを埋め込むコンテンツであり常に置換要素として取り扱います。そして外部から呼び出されるリソースは内存的寸法（固有の高さ、固有の幅、固有のアスペクト比）を所持します。

iframe, object, audio, canvas タグには実際疑似要素は適用されません。

判断基準は void 要素（Empty element）か

他に調べてみると 閉じタグが不要となる void 要素が疑似要素の適用されないタグという意見もあります。

• area
• base
• br
• col
• embed
• hr
• img
• input
• link
• meta
• param
• source
• track
• wbr

しかしこれも area, base, hr, source, には疑似要素が適用されますし、 input も上記で記載したとおりです。

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”XWMgYRr” default_tab=”css,result” user=”yat8823jp”]See the Pen Empty element by YAT (@yat8823jp) on CodePen.[/codepen_embed]

こうなってくると疑似要素が効かないものを覚えるとすれば仕様を確認しつつ丸暗記するのが手っ取り早いかな？と感じています。

このあたりの仕様決定基準がどうなっているか知りたいところですが、ひとまず今回はこのへんで。

参考文献

• imgとかinputなどの置換要素にはbefore, afterは使えないよ：しるてく
• hr要素にbefore, after疑似要素を使ってはならないのか？：Zenn
• input要素には疑似要素が使えない：明日のための記録
• 意外と知らない？ HTML置換要素をめぐる勘違いを深堀りしてみた：WPJ
• HTML Living Standard #replaced-elements
• 非置換要素と置換要素：HTML5&CSS3
• HTML replaced and void elements ：Catalin Red
• MDN Web Docs：置換要素

お役に立てたらお願いします🙇