CSS：伪元素没有显示在 <img> 上之后？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14585070/
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
CSS :after pseudo element not showing up on <img>?
提问by qwerty
I have an image that kind of slides up from the menu when you hover it. Because it's hidden under the menu i want to give the bottom of the image a little bit of deph by adding a dark fade to the bottom. I figured the best way to achieve this is to use pseudo elements. I don't really care much about IE support as it's such a small detail.
我有一个图像，当您将其悬停时，它会从菜单中向上滑动。因为它隐藏在菜单下，所以我想通过在底部添加深色淡入淡出来使图像底部有一点深度。我认为实现这一目标的最佳方法是使用伪元素。我不太关心 IE 支持，因为它是一个很小的细节。
So, here's what i've got:
所以，这就是我所拥有的：
.header-section .trygg-ehandel-icon {
position: absolute;
top: 45px;
right: 280px;
z-index: 0;
display: block;
// Stripped out some transition style here
}
// Here's where the cool stuff begins!
.header-section .trygg-ehandel-icon::after {
position: absolute;
top: 0px; left: 0px;
height: 20px; width: 20px;
display: block;
content: '.';
z-index: -999999px;
background: red;
}
First off, i'm unsure whether to use double or single colons before "after". I've always used one but recently i noticed people using two, so what's the way to go? Either seems to work!
首先，我不确定在“之后”之前是使用双冒号还是单冒号。我一直用一个，但最近我注意到有人用两个，那该怎么办呢？要么似乎工作！
You can see it in action here: http://goo.gl/RupQa
你可以在这里看到它的实际效果：http: //goo.gl/RupQa
It's the yellow logo popping up above the header menu. Why am i not seeing a 20x20 red box above the image? The parent (.trygg-ehandel-icon) is absolute positioned, so the pseudo element should show up relative to it, right?
这是标题菜单上方弹出的黄色徽标。为什么我在图像上方没有看到 20x20 的红色框？父.trygg-ehandel-icon元素( ) 是绝对定位的，所以伪元素应该相对于它显示，对吗？
I've been trying to fix this for over an hour now, any suggestions?
我已经尝试解决这个问题一个多小时了，有什么建议吗？
回答by crush
As answered in this question.
Using beforeand afterpsuedo-elements with the imgtag does not work in most browsers, by design.
根据设计，在大多数浏览器中使用before和after带有img标记的伪元素不起作用。
Image tags are self-closing (<tag />) tags because they contain no content. Since they do not contain any content, no generated content can be appended (::after) or prepended (::before) to the existing content.
图像标签是自闭合 ( <tag />) 标签，因为它们不包含任何内容。由于它们不包含任何内容，因此不能将生成的内容附加 ( ::after) 或添加 ( ::before) 到现有内容。
The article linked above lists two work-around solutions. The CSS work-around is very hackish in nature, while the jQuery solution is much more elegant, but depends on both Javascript being enabled and the jQuery library being included.
上面链接的文章列出了两个变通解决方案。CSS 解决方案本质上是非常黑客化的，而 jQuery 解决方案要优雅得多，但取决于启用的 Javascript 和包含的 jQuery 库。
