CSS:在<img>上没有显示伪元素之后？

Question

当你悬停它时,我有一个从菜单中滑出的图像.因为它隐藏在菜单下面,我希望通过在底部添加深色淡入淡出来为图像的底部提供一点点deph.我认为实现这一目标的最佳方法是使用伪元素.我并不太关心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的红色框？parent(.trygg-ehandel-icon)是绝对定位的,所以伪元素应该相对于它出现,对吧？

我一直试图解决这个问题超过一个小时了,有什么建议吗？

Answer 1

作为回答了在这个问题上.

使用before和after伪元素与img标签没有在大多数浏览器工作,通过设计.

图像标记是自闭(<tag />)标记,因为它们不包含任何内容.由于它们不包含任何内容,因此不能将生成的内容附加(::after)或预先附加(::before)到现有内容.

上面链接的文章列出了两种解决方案.CSS解决方案本质上是非常hackish,而jQuery解决方案更优雅,但依赖于启用Javascript和包含jQuery库.