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

试试这段代码

.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
}

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

下面是另一个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;
} 

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

我找到了一个方法，让这个工作在纯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

请在其他浏览器中测试

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

例子

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