：before是否不适用于img元素？

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元素中的图像上，但是如果我将overlay类应用于img自身，则无法正常工作。

我希望这项工作能够正常进行，因为这会让我感到不span舒服，但更重要的是，我有大约100个我想修改的博客文章，如果可以修改样式表，我可以一口气做到这一点，但是如果我必须返回并span在a和img元素之间添加一个额外的元素，这将需要做更多的工作。

Answer 1

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

但是，您可以使用JavaScript / jQuery完成所需的工作。看看这个小提琴：

$(function() {

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

});