html - :before not work on img elements?

Question

我正在尝试使用 :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 篇我想修改的博客文章，我可以这样做如果我可以直接修改样式表，但如果我必须返回并在 a 和 img 之间添加一个额外的 span 元素> 元素，这将是更多的工作。

Answer 1

不幸的是，大多数浏览器不支持在 img 标签上使用 :after 或 :before。

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

但是，您可以使用 JavaScript/jQuery 完成所需的工作。看看这个 fiddle :

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

$(function() {

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

});

编辑:

关于不支持此功能的原因，请查看 coreyward's answer .