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的红色框？父（.trygg-ehandel-icon）是绝对定位的，因此伪元素应该相对于它出现，对吗？

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

Answer 1

回答in this question。

将before和after psuedo-elements与img标记一起使用在大多数浏览器中都不起作用， 按设计 。

图片代码是自动关闭（<tag />）代码，因为它们不包含任何内容。由于它们不包含任何内容，因此不能将生成的内容（::after）或前置（::before）附加到现有内容中。

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

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

1 个答案: