是否：之前不工作img元素？
我试图使用:beforeselect器放置在另一个图像的图像，但我发现它根本无法将一个图像放在一个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元素，这将是更多的工作。
不幸的是，大多数浏览器不支持在img标签:after使用:after或:before 。
http://lildude.co.uk/after-css-property-for-img-tag
但是，您可以使用JavaScript / jQuery来完成您所需要的function。 看看这个小提琴：
http://jsfiddle.net/xixonia/ahnGT/
$(function() { $('.target').after('<img src="..." />'); });
编辑 ：
为什么这不被支持的原因，检查coreyward的答案 。
伪select器之前和之后不插入HTML元素 – 它们在目标元素的现有内容之前或之后插入文本。 因为图片元素不包含文字或有后代，所以img:before或img:after都不会对你有好处。 对于像和<hr>这样的元素，情况也是如此。
我find了一种方法来使这个工作在纯CSS：
我只是假的内容 – 方法
一个纯粹的CSS方法来启用img：after。
你可以看看CodePen：我只是假的内容或看到源代码 。
资源
HTML
<img alt="You are watching the ~ I'm just fake content ~ method" />
CSS
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); }
浏览器支持
✓Chrome 10+
✓火狐11 +
✓歌剧9.8+
✓Safari
没有支持
⊗Internet Explorer 8/9
请在其他浏览器中testing
这里有另一个解决scheme，使用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; }
要看到它的行动，看看我已经创build的小提琴 。 只是所以你知道这是跨浏览器友好的，没有必要欺骗'假内容'的代码。
我试过并find了一个更简单的方法来做到这一点。 这里是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'); }
尝试一下。
