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

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

然而，你可以用JavaScript/jQuery来完成你所需要的。看看这把小提琴:

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

$(function() {

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

});

编辑:

对于不支持的原因，请查看coreyward的答案。

before和after伪选择器不插入HTML元素——它们在目标元素的现有内容之前或之后插入文本。因为图像元素不包含文本，也没有后代，所以img:before或img:after都不会对您有任何好处。对于<br>和<hr>这样的元素也是如此，原因相同。

我找到了一个方法，让这个工作在纯css:

“我只是假内容”方法

一个纯CSS方法来启用img:after。

你可以查看CodePen: I'm just fake content或查看源代码。

来源和代码片段

img { /* hide the default image */ height:0; width:0; /* hide fake content */ font-size:0; color:transparent; /* enable absolute position for pseudo elements */ position:relative; /* and this is just fake content */ content:"I'm just fake content"; } /* initial absolute position */ img:before, img:after { position:absolute; top:0; left:0; } /* img:before - chrome & others */ img:before { content:url(http://placekitten.com/g/250/250); } /* img:before - firefox */ body:not(:-moz-handler-blocked) img:before { padding:125px; background:url(http://placekitten.com/g/250/250) no-repeat; } /* img:after */ img:after { /* width of img:before */ left:250px; content:url(http://lorempixel.com/350/200/city/1); } <img alt="You are watching the ~ I'm just fake content ~ method" />

浏览器支持

✓Chrome 10 +。

✓火狐11 +

Opera 9.8+

✓ 野生动物园

不支持

⊗Internet Explorer 8 / 9

请在其他浏览器中测试

下面是另一个img使用div容器的解决方案，同时使用:hover::after来达到效果。

HTML如下:

<div id=img_container><img src='' style='height:300px; width:300px;'></img></div>

CSS如下:

#img_container { 
    margin:0; 
    position:relative; 
} 

#img_container:hover::after { 
    content:''; 
    display:block; 
    position:absolute; 
    width:300px; 
    height:300px; 
    background:url(''); 
    z-index:1; 
    top:0;
} 

要查看它的操作，请检查我创建的小提琴。只是为了让你知道这是跨浏览器友好的，没有必要用“假内容”欺骗代码。

我试着找到了一个更简单的方法。下面是HTML:

    <img id="message_icon" src="messages2.png">
    <p id="empty_para"></p>

我所做的是在我的图像标签后放置一个空的<p>标签。现在我将使用p::before来显示图像，并根据我的需要来定位它。下面是CSS:

#empty_para
{
    display:inline;
    font-size:40;
    background:orange;
    border:2px solid red;
    position:relative;
    top:-400px;
    left:100px;
}
#empty_para::before
{
    content: url('messages.png');
}

试一试。

我认为了解为什么这行不通的最好方法是:before和:after将它们的内容插入到你应用它们的标签内的内容之前或之后。所以它适用于div或span(或大多数其他标签)，因为您可以在其中放置内容。

<div>
:before
Content
:after
</div>

但是，img是一个自包含、自结束标记，由于它没有单独的结束标记，所以不能在其中放入任何东西。(这需要看起来像<img>Content</img>，但当然这是行不通的。)

我知道这是一个老话题，但它首先出现在谷歌上，所以希望这能帮助其他人学习。

这个对我很有用:

html

<ul>
    <li> name here </li>
</ul>

CSS

ul li::before {
    content: url(../images/check.png);
}

在前一个元素上尝试::。

由于<img>是一个替换的元素，文档样式化不会影响它。

为了引用它，<picture>提供了一个理想的本机包装器，可以将伪元素附加到它上面，如下所示:

img:之后, {后图片: 内容:“\ 1 f63b”; 字体大小:大; 保证金:1 em; ｝ < img src = " / / placekitten.com/110/80 " > <图片> < img src = " / / placekitten.com/110/80 " > < /图片>

由::before和::after生成的伪元素包含在元素的格式化框中，因此不适用于替换的元素，如img或br元素。

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

试试这段代码

.button:after {
    content: ""
    position: absolute
    width: 70px
    background-image: url('../../images/frontapp/mid-icon.svg')
    display: inline-block
    background-size: contain
    background-repeat: no-repeat
    right: 0
    bottom: 0
}

:after可用于显示映像的回退映像

请看下面的例子，前2个img标签指向损坏的url。但第二个显示的是后退图像，而不是浏览器默认的损坏logo。然而，我不确定这是否实用，我发现让它正确工作有点棘手。

img { position: relative; display: inline-block; width: 300px; height: 200px; vertical-align: top; } img:not(:first-child)::after { position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: "<" attr(alt) "> NOT FOUND"; border: 1px dashed #999; background: url(https://cdn.dribbble.com/users/1012566/screenshots/4187820/topic-2.jpg) center/100%; } <img src="https://source.unsplash.com/random/100/75" alt="logo"> <img src="https://source.unsplash.com/random/100/75" alt="logo"> <img src="https://source.unsplash.com/random/100x75" alt="logo">

只要给图像“position: relative”，它就可以工作了

在这些情况下，最好使用<figure>标记，它允许您以最佳的方式管理css 这样你就可以用后才上图了

例子

<div class="exemple">
  <figure>
    <img src="img1.jpg"/>
  </figure>
  <figure>
    <img src="img2.jpg"/>
  </figure>
</div>

<img>是一个替换的元素，如果图像加载失败，则在其上使用:before或:after伪元素，否则将不起作用。如果您打算在图像加载失败的情况下有一个后备方案，请参阅https://stackoverflow.com/a/71478688/14204452

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>

      #image img{
    display: inline-block;
    max-width: 50%;
    }

      #image::after {
    position: absolute;
    top: 0;
    content: url('https://img.icons8.com/plasticine/100/000000/about.png');
    }

    </style>
    <title>img before</title>
  </head>
  <body>
    <a id="image" href="">
    <img src="https://static.remove.bg/remove-bg-web/5c20d2ecc9ddb1b6c85540a333ec65e2c616dbbd/assets/start-1abfb4fe2980eabfbbaaa4365a0692539f7cd2725f324f904565a9a744f8e214.jpg">
    </a>
  </body>
</html>