23

我有一个图像，当您将其悬停时，它会从菜单中向上滑动。因为它隐藏在菜单下，所以我想通过在底部添加暗淡来给图像的底部一点深度。我认为实现这一目标的最佳方法是使用伪元素。我不太关心 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) 是绝对定位的，所以伪元素应该相对于它显示，对吧？

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

4

1 回答 1

49

正如这个问题所回答的那样。

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

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

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

于 2013-01-29T15:38:22.327 回答