61195


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

[code]

    input:before {
      content: 'not checked';
      position: absolute;
      top: 30px;
    }
    input:checked:before {
      content: 'checked';
    }
[/code]

[code]

    <input type="checkbox" />
[/code]

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

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


CC BY-SA 3.0
2015-10-19T11:18:31.270
17819
2019-12-23T11:33:11.980
8000
question
css
input[type=checkbox] に対して :before, :after 疑似要素が使えるのはChromeだけ？


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

[code]

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

は

[code]

    <div><div::before />def</div>
    
[/code]

であり  

[code]

    <div>abcdef</div>
    
[/code]

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


CC BY-SA 3.0
2015-10-19T11:59:54.497
17822
2015-10-19T11:59:54.497
4236
17819
answer


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

[code]

    input + span:before {
      content: 'not checked';
    }
    input:checked + span:before {
      content: 'checked';
    }
[/code]

[code]

    <input type="checkbox" />
    <span></span>
[/code]


CC BY-SA 3.0
2015-10-19T12:12:38.387
17824
2015-10-19T12:12:38.387
3054
17819
answer


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

はい、期待しないほうが良いと思います。

* * *

CSS 2 では `img` 要素で画像が表示されない場合に、設定しておいた `before`, `after`
擬似要素により生成されたコンテンツが表示される、という例が載っていました[[1]](https://www.w3.org/TR/2008/REC-
CSS2-20080411/generate.html#propdef-content)。

> ### 12.2 The 'content' property[[1]](https://www.w3.org/TR/2008/REC-
> CSS2-20080411/generate.html#propdef-content)
>
> 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.
[code]

>     IMG:before { content: attr(alt) }
>  
[/code]

一方で、 CSS 2.1 は置換要素における `before`, `after`
擬似要素の扱いを定義していない[[2]](https://www.w3.org/TR/CSS21/generate.html#before-after-
content)ため、それらがどのように扱われるのかは **各ブラウザの実装に依存** しています。これは 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]](https://www.w3.org/TR/CSS21/generate.html#before-after-
> content)
>
> 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]](https://www.w3.org/TR/css-content-3/#content-
property)が、この仕様は草案段階であり、従来定義されていなかった項目のため、これを多くのブラウザが実装するまでには時間がかかると考えられます。

> ### 1\. Inserting and replacing content with the content
> property[[3]](https://www.w3.org/TR/css-content-3/#content-property)
>
> Note: Replaced elements do not have ::before or ::after pseudo-elements; the
> content property replaces their entire contents.


CC BY-SA 4.0
2019-12-07T04:42:37.270
61195
2019-12-23T11:33:11.980
2019-12-23T11:33:11.980
32986
32986
17819
answer