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

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元素是替换元素,HTML规范明确指出:

注意.此规范未完全定义:替换元素(例如HTML中的IMG)之前和之后的交互.这将在未来的规范中更详细地定义.

因此,不应使用这种伪元素img.

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

更多关于MDN的替换元素

在CSS中,替换元素是其表示在CSS范围之外的元素.这些是外部对象,其表示独立于CSS.典型替换元素是<img>,<object>,<video>或者形成元件等<textarea>, <input>.某些元素,仅​​在特定情况下被替换或替换元素.使用CSS内容属性插入的对象是匿名替换元素.