CSS :after 伪元素没有出现在 <img> 上？ [复制]

Question

我有一个图像，当您将其悬停时，它会从菜单中向上滑动。因为它隐藏在菜单下，所以我想通过在底部添加暗淡来给图像底部一点深度。我认为实现这一目标的最佳方法是使用伪元素。我不太关心 IE 支持，因为这是一个小细节。

所以，这就是我所拥有的：

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

首先，我不确定在“之后”之前是使用双冒号还是单冒号。我一直用一个，但最近我注意到有人用两个，那该怎么办？两者似乎都有效！

你可以在这里看到它的实际效果：http://goo.gl/RupQa

这是标题菜单上方弹出的黄色徽标。为什么我在图像上方看不到 20x20 的红色框？父级 (.trygg-ehandel-icon) 是绝对定位的，所以伪元素应该相对于它显示，对吧？

我已经尝试解决这个问题一个多小时了，有什么建议吗？

Answer 1

正如in this question的回答。

将before 和after 伪元素与img 标签一起使用在大多数浏览器中不起作用，设计使然。

图像标签是自闭合 (<tag />) 标签，因为它们不包含任何内容。由于它们不包含任何内容，因此生成的内容不能附加 (::after) 或附加 (::before) 到现有内容。

上面链接的文章列出了两种解决方法。 CSS 变通方法本质上是非常 hackish，而 jQuery 解决方案更优雅，但取决于启用的 Javascript 和包含的 jQuery 库。