6

チェックボックスと連動して変化する表示を CSS だけで実装できないかと、以下のようなコードを書きました。これは Chrome 46 では期待通りに動き、チェック状態がテキストで表示されます。

input:before {
  content: 'not checked';
  position: absolute;
  top: 30px;
}
input:checked:before {
  content: 'checked';
}
<input type="checkbox" />

しかし Firefox や IE 11 では動作せず、開発者ツールで見ると :before が効いていないようです。

これは Chrome の独自仕様に過ぎず、他ブラウザでの動作は期待しない方がいいのでしょうか?

3 件の回答 3

6

::before::afterは対象となる要素のコンテンツの先頭および末尾に疑似的に要素を追加するものです。

<style>
    div::before{
        content: 'abc';
    }
</style>
<div>def</div>

<div><div::before />def</div>

であり

<div>abcdef</div>

となります。そのため、コンテンツを持たない<input/> <img/> <hr/>などには使えません。

4

inputには中身が無いので挿入のしようも無い、というのが Firefox の仕様の解釈なのだと思います。
隣に中身を持てる要素を用意し、隣接セレクタで設定するとよいです。

input + span:before {
  content: 'not checked';
}
input:checked + span:before {
  content: 'checked';
}
<input type="checkbox" />
<span></span>

3

これは 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.

0

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。