Html :before 对 img 元素不起作用吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5843035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Does :before not work on img elements?
提问by Joshua Frank
I'm trying to use the :beforeselector to place an image over another image, but I'm finding that it simply doesn't work to place an image before an imgelement, only some other element. Specifically, my styles are:
我正在尝试使用:before选择器将图像放置在另一个图像上，但我发现将图像放置在img元素之前根本不起作用，只能放置其他一些元素。具体来说，我的风格是：
.container
{
position: relative;
display: block;
}
.overlay:before
{
content: url(images/[someimage].png);
position: absolute;
left:-20px;
top: -20px;
}
and I find that this works fine:
我发现这很好用：
<a href="[url]" class="container">
<span class="overlay"/>
<img width="200" src="[url]"/>
</a>
but this does not:
但这不会：
<a href="[url]" class="container">
<img width="200" src="[url]" class="overlay"/>
</a>
I can use a divor pelement instead of that span, and the browser correctly overlays my image over the image in the imgelement, but if I apply the overlay class to the imgitself, it doesn't work.
我可以使用 a divorp元素代替 that span，并且浏览器正确地将我的图像覆盖在img元素中的图像上，但是如果我将覆盖类应用于它img本身，它就不起作用。
I'd like to get this working because that extra spanoffends me, but more importantly, I've got about 100 blog posts that I'd like to modify, and I can do this in one go if I could just modify the stylesheet, but if I have to go back and add an extra spanelement in between the aand imgelements, this will be a lot more work.
我想让这个工作，因为这额外span冒犯了我，但更重要的是，我有大约 100 篇博客文章我想修改，如果我可以修改样式表，我可以一次性完成，但是如果我必须返回并span在a和img元素之间添加一个额外的元素，这将需要做更多的工作。
回答by cwharris
Unfortunately, most browsers do not support using :afteror :beforeon img tags.
不幸的是，大多数浏览器不支持使用:after或:beforeimg 标签。
http://lildude.co.uk/after-css-property-for-img-tag
http://lildude.co.uk/after-css-property-for-img-tag
However, it IS possible for you to accomplish what you need with JavaScript/jQuery. Check out this fiddle:
但是，您可以使用 JavaScript/jQuery 完成您需要的工作。看看这个小提琴：
http://jsfiddle.net/xixonia/ahnGT/
http://jsfiddle.net/xixonia/ahnGT/
$(function() {
$('.target').after('<img src="..." />');
});
Edit:
编辑：
For the reason why this isn't supported, check out coreyward's answer.
出于不支持此功能的原因，请查看coreyward 的答案。
回答by coreyward
The before and after pseudo-selectors don't insert HTML elements —?they insert text before or after the existing content of the targeted element. Because image elements don't contain text or have descendants, neither img:beforeor img:afterwill do you any good. This is also the case for elements like <br>and <hr>for the same reason.
before 和 after 伪选择器不插入 HTML 元素——它们在目标元素的现有内容之前或之后插入文本。由于图像元素不包含文本或有后代，既不img:before或者img:after将你带来任何好处。出于同样的原因<br>，<hr>对于类似的元素也是如此。
回答by TimPietrusky
I found a way to make this work in pure css:
我找到了一种在纯 css 中完成这项工作的方法：
The I'm just fake content-method
在我只是假的内容-方法
a pure CSS method to enable img:after.
启用 img:after 的纯 CSS 方法。
You can check out the CodePen: I'm just fake contentor see the source.
您可以查看CodePen：我只是虚假内容或查看来源。
Source & Snippet
来源和片段
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"
/>Browser support
浏览器支持
✓ Chrome 10+
✓ 铬 10+
✓ Firefox 11+
✓ 火狐 11+
✓ Opera 9.8+
✓ 歌剧 9.8+
✓ Safari
✓ 野生动物园
No support
没有支持
⊗ Internet Explorer 8 / 9
⊗ Internet Explorer 8 / 9
Please test in other browsers
请在其他浏览器中测试
回答by dakab
Due to the nature of <img>being a replaced element, document styling doesn't affected it.
To reference it anyway, <picture>provides an ideal, native wrapper that can have pseudo-elements attached to it, like so:
无论如何要引用它，<picture>提供一个理想的本地包装器，可以附加伪元素，如下所示：
img:after, picture:after{
content:"F63B";
font-size:larger;
margin:-1em;
}<img src="//placekitten.com/110/80">
<picture>
<img src="//placekitten.com/110/80">
</picture>回答by truleighsyd
Here's another solution using a div container for img while using :hover::afterto achieve the effect.
这是另一个使用div容器为img同时使用:hover::after来实现效果的解决方案。
The HTML as follows:
HTML如下：
<div id=img_container><img src='' style='height:300px; width:300px;'></img></div>
The CSS as follows:
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;
}
To see it in action, check out the fiddleI've created. Just so you know this is cross browser friendly and there's no need to trick the code with 'fake content'.
要查看它的实际效果，请查看我创建的小提琴。只是为了让您知道这是跨浏览器友好的，并且无需使用“虚假内容”来欺骗代码。
回答by Goda A
The pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as img, or to br elements.
::before 和 ::after 生成的伪元素包含在元素的格式化框中，因此不适用于被替换的元素，例如 img 或 br 元素。
回答by BevansDesign
I think the best way to look at why this doesn't work is that :before and :after insert their content before or after the content within the tag you're applying them to. So it works with divs or spans (or most other tags) because you can put content inside them.
我认为查看为什么这不起作用的最佳方法是 :before 和 :after 在您应用它们的标签内的内容之前或之后插入它们的内容。因此它适用于 div 或 span（或大多数其他标签），因为您可以将内容放入其中。
<div>
:before
Content
:after
</div>
However, an img is a self-contained, self-closing tag, and since it has no separate closing tag, you can't put anything inside of it. (That would need to look like <img>Content</img>, but of course that doesn't work.)
然而，一个 img 是一个自包含的、自关闭的标签，因为它没有单独的结束标签，你不能在它里面放任何东西。（这需要看起来像<img>Content</img>，但这当然行不通。）
I know this is an old topic, but it pops up first on Google, so hopefully this will help others learn.
我知道这是一个古老的话题，但它首先出现在谷歌上，所以希望这能帮助其他人学习。
回答by Sword I
This one works for me:
这个对我有用：
html
html
<ul>
<li> name here </li>
</ul>
CSS
CSS
ul li::before {
content: url(../images/check.png);
}
回答by Loi Nguyen Huynh
::aftermaybe used to display the fallback imageof an image
::after可用于显示图像的后备图像
See the example below, first 2 imgtags are point to the broken urls. But the second one displays the fallback image instead of the default broken logo from the browser. However, I'm not sure this's any practical, I find it kind of tricky to get it to work right.
请参见下面的示例，前 2 个img标签指向损坏的 url。但是第二个显示的是后备图像，而不是浏览器中默认的损坏徽标。但是，我不确定这是否实用，我发现让它正常工作有点棘手。
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">回答by subindas pm
Try this code
试试这个代码
.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
}
