如何在图像前后插入内容[重复]答案

【问题标题】：How to insert content after and before image [duplicate]如何在图像前后插入内容[重复]
【发布时间】：2014-07-16 18:15:30
【问题描述】：

我试图在 html 中的图像之后放置伪类，但它不起作用。这就是我所做的：

<img src="image.png" class="item-portfolio" alt="portfolio item">

CSS

.item-portfolio img:after{
    content: url(images/shadow.png) no-repeat; 
    position: absolute;
    right: 8px;
    top: 0;
}
.item-portfolio p:before{
    content: url(images/shadow.png) no-repeat;  
    display: block;
    position: absolute;

    left: 6px;
    top: 0;
}

是否可以在图像之后设置此图像？

【问题讨论】：

括在span?
你的意思是<span><img src="image.png" class="item-portfolio" alt="portfolio item"></span> ?
jsfiddle.net/ryanoc/DgV78查看此链接
@user3699634：是的，并将之前和之后放在span 上。大致像this。
你的例子很好，但在我的文件中它不起作用;(

标签： html css

【解决方案1】：

img 元素被替换元素，the HTML spec 特别声明：

注意。本规范没有完全定义交互 :before 和 :after 替换元素（例如 HTML 中的 IMG）。这个将在未来的规范中更详细地定义。

因此，此类伪元素不应用于img。

解决此问题的方法是将图像包装在父元素中，并将:before/after 应用于该元素。

More on replaced elements from MDN

在 CSS 中，被替换元素是一个表示为超出了 CSS 的范围。这些是一种外部对象，其表示与 CSS 无关。典型的替换元素是<img>、<object>、<video> 或像<textarea> 这样的表单元素， <input>。一些元素，喜欢或被替换的元素仅在特定情况下。使用 CSS 内容插入的对象属性是匿名替换元素。

【讨论】：

【解决方案2】：

脚本

 $('img')
.before('<span> Before</span>')
.after('<span> After</span>');

通过 Jquery 你可以在之后和之前插入

【讨论】：

【解决方案3】：

伪元素不适用于 img 标签

http://www.w3.org/TR/CSS2/generate.html#before-after-content

【讨论】：