これは Chrome の独自仕様に過ぎず、他ブラウザでの動作は期待しない方がいいのでしょうか?
はい、期待しないほうが良いと思います。
CSS 2 では img
要素で画像が表示されない場合に、設定しておいた before
, after
擬似要素により生成されたコンテンツが表示される、という例が載っていました[1]。
12.2 The 'content' property[1]
The next rule inserts the text of the HTML "alt" attribute before the image. If the image is not displayed, the reader will still see the "alt" text.
IMG:before { content: attr(alt) }
一方で、 CSS 2.1 は置換要素における before
, after
擬似要素の扱いを定義していない[2]ため、それらがどのように扱われるのかは各ブラウザの実装に依存しています。これは CSS 2.1 の 12 章 1 節で言及されています。したがって、 CSS 2.1 において、置換要素に対して before
, after
擬似要素が使えないことを示す十分な根拠は存在しません。実際に、質問文で置換要素に before
, after
擬似要素が効かないとされている Firefox においても、
hr
要素では before
, after
擬似要素が動作する
type
属性に image
を設定した input
要素において、 before
擬似要素によりデフォルトのテキストが挿入される
など、その動作に一貫性がありません。
12.1 The :before and :after pseudo-elements[2]
Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
次に CSS 2.1 以外の仕様をみると、 CSS Generated Content Module Level 3 で置換要素における before
, after
擬似要素の扱いが言及されています[3]が、この仕様は草案段階であり、従来定義されていなかった項目のため、これを多くのブラウザが実装するまでには時間がかかると考えられます。
1. Inserting and replacing content with the content property[3]
Note: Replaced elements do not have ::before or ::after pseudo-elements; the content property replaces their entire contents.