web-dev-qa-db-ja.com

：beforeおよび：after擬似要素が `img`要素と連携しないのはなぜですか？

:before疑似要素 をimg要素とともに使用しようとしています。

このHTMLとCSSを検討してください...

HTML

<img src="http://0.gravatar.com/avatar/this-is-not-a-hash" alt="" />

CSS

img:before {
  content: "hello";
}

jsFiddle 。

これでは、目的の効果が得られません（Chrome 13およびFirefox 6でテスト済み）。ただし、divまたはspan要素では機能します。

何故なの？

擬似要素をimg要素で動作させる方法はありますか？

csspseudo-elementcss-content
113
alex

仕様によると ...

注意。この仕様では、:beforeと:afterの交換要素（HTMLのIMGなど）との相互作用を完全には定義していません。これは、将来の仕様でより詳細に定義されます。

これは、img要素では動作しないことを意味すると思います（現時点では）。

this answer も参照してください。

118
alex

テストしてそれがきれいではないことを知るためだけに、以下を実行して擬似要素を「img」要素と連携させることができます。

CSSのimg要素にdisplay: block; content: ""; height: (height of image)pxを追加します。

content: ""のimgタグが空の原因になりますが、

style="background-image: url(image.jpg)"をhtmlのimg要素に追加します。

Fx、ChromeおよびSafariでこれをテストしました

6
Ferdi Emmen

ブラウザのベンダーは、仕様の解釈のためにimgタグに疑似要素を実装していない可能性があります。厳密に言えば、img要素は、ブロックレベルの要素でもインライン要素でもありません 空の要素 。

5
Joel Glovier