是否:之前不工作的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元素中的图像上，但如果我将overlay类应用到img本身，它就不起作用了。

我想让它工作，因为额外的span冒犯了我，但更重要的是，我有大约100篇博客文章，我想修改，如果我可以修改样式表，我可以一次完成这一点，但如果我必须返回并在a和img元素之间添加一个额外的span元素，这将是更多的工作。

308563 次浏览
小开
最佳答案

不幸的是，大多数浏览器不支持在img标记上使用:after或:before。

< a href = " http://lildude.co。英国/ after-css-property-for-img-tag noreferrer“rel = > http://lildude.co.uk/after-css-property-for-img-tag < / >

然而，你可以用JavaScript/jQuery来完成你所需要的。看看这把小提琴:

http://jsfiddle.net/xixonia/ahnGT/

$(function() {


$('.target').after('<img src="..." />');


});

< em >编辑< / em >:

对于不支持的原因，请查看coreyward的回答。

小开

before和after伪选择器不插入HTML元素——它们在目标元素的现有内容之前或之后插入文本。因为图像元素不包含文本或有后代，所以img:before或img:after对你没有任何好处。出于同样的原因，<br>和<hr>等元素也是如此。

小开

我找到了一个方法，让这个工作在纯css:

的我只是虚假的满足-method

一个纯CSS方法来启用img:after。

你可以检查出< a href = " http://codepen。io/TimPietrusky/pen/xpesA" rel="noreferrer">CodePen:我只是假内容或看到源。

源,片段

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);
}
<img
alt="You are watching the ~ I'm just fake content ~ method"
/>

浏览器支持

& # 10003;Chrome 10 +

& # 10003;Firefox 11 +

& # 10003;Opera 9.8 +

& # 10003;Safari

不支持

& # 8855;Internet Explorer 8 / 9

请在其他浏览器中测试

小开

下面是另一个使用div容器的img解决方案，同时使用: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;
}

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

小开

我试着找到了一个更简单的方法。下面是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');
}

试一试。

小开

我认为了解为什么这行不通的最好方法是:before和:after将它们的内容插入到你应用它们的标签内的内容之前或之后。所以它适用于div或span(或大多数其他标签)，因为您可以在其中放置内容。

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

但是，img是一个自包含、自结束标记，由于它没有单独的结束标记，所以不能在其中放入任何东西。(这需要看起来像<img>Content</img>，但当然这是行不通的。)

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

小开

这个对我很有用:

超文本标记语言

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

CSS

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

在前一个元素上尝试后::。

小开

由于<img>的性质是替换元素，文档样式化不会影响它。

为了引用它，<picture>提供了一个理想的本机包装器，可以将伪元素附加到它上面，如下所示:

img::after,
picture::after{
content:"\1F63B";
font-size:larger;
margin:-1em;
}
<img src="//placekitten.com/110/80">


<picture>
<img src="//placekitten.com/110/80">
</picture>

小开

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

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

小开

试试这段代码

.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。但第二个显示的是后退图像，而不是浏览器默认的损坏logo。然而，我不确定这是否实用，我发现让它正确工作有点棘手。

img {
position: relative;
display: inline-block;
width: 300px;
height: 200px;
vertical-align: top;
}
img:not(:first-child)::after {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
content: "<" attr(alt) "> NOT FOUND";
border: 1px dashed #999;
background: url(https://cdn.dribbble.com/users/1012566/screenshots/4187820/topic-2.jpg) center/100%;
}
<img src="https://source.unsplash.com/random/100/75" alt="logo">
<img src="https://source.unsplash.com/random/100/75" alt="logo">
<img src="https://source.unsplash.com/random/100x75" alt="logo">

小开

只要给图像“相对位置”;这是可行的

小开
在这些情况下，最好使用<figure>标记，它允许你以最优的方式管理css 这样你就可以在图

上使用after

例子

<div class="exemple">
<figure>
<img src="img1.jpg"/>
</figure>
<figure>
<img src="img2.jpg"/>
</figure>
</div>
小开

& lt; img>是一个替换的元素，如果图像加载失败，则在其上使用:before或:after伪元素，否则将不起作用。如果你打算在图像加载失败的情况下有一个后备方案，请参考https://stackoverflow.com/a/71478688/14204452

小开 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>


#image img{
display: inline-block;
max-width: 50%;
}


#image::after {
position: absolute;
top: 0;
content: url('https://img.icons8.com/plasticine/100/000000/about.png');
}


</style>
<title>img before</title>
</head>
<body>
<a id="image" href="">
<img src="https://static.remove.bg/remove-bg-web/5c20d2ecc9ddb1b6c85540a333ec65e2c616dbbd/assets/start-1abfb4fe2980eabfbbaaa4365a0692539f7cd2725f324f904565a9a744f8e214.jpg">
</a>
</body>
</html>

提交答案