Html 是否：在不处理img元素之前？

我试图使用

：before

选择器将图像放置在另一个图像上，但我发现将图像放置在

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

或

：before

但是，您可以使用JavaScript/jQuery完成所需的工作。看看这把小提琴：

$（函数（）{
$（'.target'）。在（''）之后；
});

编辑：

---

有关不支持此选项的原因，请查看。

前后伪选择器不插入HTML元素-它们在目标元素的现有内容之前或之后插入文本。由于图像元素不包含文本或子元素，因此

img:before

或

img:after

都不会对您有任何好处。对于像

和

这样的元素也是如此，原因也是一样的。

我找到了一种在纯css中工作的方法：

“我只是假的内容”方法 启用img:after的纯CSS方法

您可以查看或查看源文件

源代码和代码段

img{
/*隐藏默认图像*/
身高：0；
宽度：0；
/*隐藏虚假内容*/
字号：0；
颜色：透明；
/*为伪元素启用绝对位置*/
位置：相对位置；
/*这只是假的内容*/
内容：“我只是假内容”；
}
/*初始绝对位置*/
img：以前，
img：之后{
位置：绝对位置；
排名：0；
左：0；
}
/*img：之前-chrome和其他*/
img：以前{
内容：网址(http://placekitten.com/g/250/250);
}
/*img:before-firefox*/
正文：未（：-moz处理程序被阻止）img:before{
填充：125px；
背景：url(http://placekitten.com/g/250/250)不重复；
}
/*img：之后*/
img：之后{
/*img的宽度：之前*/
左：250px；
内容：网址(http://lorempixel.com/350/200/city/1);
}

---

这里有另一个解决方案，使用img的div容器，同时使用

：hover:：after

来实现效果

HTML格式如下所示：

<div id=img_container><img src='' style='height:300px; width:300px;'></img></div>

#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;
} 

---

要查看它的实际效果，请查看我创建的。只是让你知道这是跨浏览器友好的，没有必要用“假内容”欺骗代码

我尝试并找到了一种更简单的方法。以下是HTML：

我所做的是在我的图像标签后放置一个空的

标签。现在，我将使用p:：before来显示图像，并根据需要对其进行定位。以下是CSS：

#空#u段
{
显示：内联；
字号:40 ;；
背景：橙色；
边框：2倍纯红；
位置：相对位置；
顶部：-400px；
左：100px；
}
#空的，空的
{
内容：url（'messages.png'）；
}

---

试试看。

我认为最好的办法是：在应用它们的标记中的内容之前或之后插入它们的内容。因此，它适用于div或span（或大多数其他标记），因为您可以将内容放入其中

<div>
:before
Content
:after
</div>

：之前
内容
：之后

然而，img是一个自包含的、自结束标记，因为它没有单独的结束标记，所以不能在它里面放任何东西。（这需要看起来像

内容

，但当然不行。）

---

我知道这是一个老话题，但它首先出现在谷歌上，所以希望这能帮助其他人学习。

这一个对我来说很有用：

html

<ul>
    <li> name here </li>
</ul>

---

尝试：：在上一个元素的之后。

由于文档的性质，文档样式不会影响它

无论如何，为了引用它，提供了一个理想的本机包装器，它可以附加伪元素，如下所示：

img:after，picture:after{
内容：“\1F63B”；
字体大小：较大；
边缘：-1米；
}

---

由：：before和：：after生成的伪元素包含在元素的格式框中，因此不适用于替换的元素，如img或br元素

试试这段代码

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

：：after

可用于显示图像的回退图像

---

参见下面的示例，前2个

img

标记指向断开的URL。但第二个显示的是回退图像，而不是浏览器中默认的损坏徽标。然而，我不确定这是否可行，我发现让它正常工作有点棘手

img{
位置：相对位置；
显示：内联块；
宽度：300px；
高度：200px；
垂直对齐：顶部；
}
img：不是（：第一个孩子）：：之后{
位置：绝对位置；
左侧：0；顶部：0；右侧：0；底部：0；
内容：“未找到”；
边框：1px虚线#999；
背景：url(https://cdn.dribbble.com/users/1012566/screenshots/4187820/topic-2.jpg)中心/100%；
}

---

只需给出图像“位置：相对”，它就会起作用

Img标签本身显然是元素，但我们可以在其他el之前或之后插入它们

ul li::before {
    content: url(../images/check.png);
}

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