css

Question

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

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

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

img:before {
  content: "hello";
}

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

なぜだめですか？

疑似要素を要素で機能させる方法はありimgますか？

score 145 · Accepted Answer

ノート。この仕様は、置き換えられた要素（HTMLのIMGなど）:beforeとの相互作用を完全には定義していません。:afterこれは、将来の仕様でより詳細に定義される予定です。

imgこれは、要素を処理できないことを意味していると思います（今のところ）。

この回答も参照してください。

score 8 · Accepted Answer

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

score 6 · Accepted Answer

テストして、それがきれいではないことを知るためだけに、次のようにして、疑似要素を「img」要素で機能させることができます。

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

それはあなたのimgタグを空にしcontent: ""ますがあなたの原因はそれからできます

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

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

css - 疑似要素が`img`要素で機能しないのはなぜですか？