[解決済み】img要素で:beforeが効かない？

質問

を使おうとしているのですが :before セレクタを使用して画像を別の画像の上に配置することができます。 img 要素のみで、他の要素はありません。 具体的には、私のスタイルは以下の通りです。

.container
{
   position: relative;
   display: block;
}

.overlay:before
{
    content: url(images/[someimage].png);
    position: absolute;
    left:-20px;
    top: -20px;
}

で、これで問題なく動作することがわかります。

<a href="[url]" class="container">
  <span class="overlay"/>
  <img width="200" src="[url]"/>
</a>

が、これはそうではありません。

<a href="[url]" class="container">
  <img width="200" src="[url]" class="overlay"/>
</a>

を使うことができますね。 div または p 要素の代わりに、その span の画像に私の画像が正しく重なり、ブラウザはこの画像を img 要素にオーバーレイクラスを適用すると img を使用すると、動作しません。

というのも、この余分な span しかし、それよりも重要なのは、100ほどのブログ記事を修正したいのですが、スタイルシートを修正すれば一度にできるのですが、もし、戻って余計な span 要素の間に a と img 要素を使用する場合、より多くの作業が必要になります。

どのように解決するのですか？

残念ながら、ほとんどのブラウザは :after または :before をimgタグの上に置く。

http://lildude.co.uk/after-css-property-for-img-tag

しかし、JavaScript/jQueryを使えば、必要なことを実現することは可能です。このフィドルを見てください。

http://jsfiddle.net/xixonia/ahnGT/

$(function() {

    $('.target').after('<img src="..." />');

});

編集 :

対応しない理由については coreywardの回答 .