Question

我试图在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;
}

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

Answer 1

img元素是替换元素，the HTML spec具体说明：

请注意。该规范没有完全定义交互：before和：after with replacement elements（例如HTML中的IMG）。这个将在未来的规范中更详细地定义。

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

抵消这种情况的方法是将图像包装在父元素中，并将:before/after应用于该元素。

More on replaced elements from MDN

在CSS中，替换元素是其表示形式的元素超出CSS的范围。这些是外部物体表示独立于CSS。典型的替换元素是<img>，<object>，<video>或表单元素<textarea>， <input>。一些元素，如或被替换元素仅在特定情况下。使用CSS内容插入的对象属性是匿名替换元素。

Answer 2

<强> SCRIPT

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

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

Answer 3

伪元素不适用于img标记

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

如何在图像之前和之后插入内容

3 个答案: