CSS：伪元素不显示在< img&gt ;? [英] CSS :after pseudo element not showing up on <img>?

问题描述

当您将鼠标悬停在菜单上时，我有一个图片。因为它隐藏在菜单下，我想给底部的图像一点点deph通过添加一个暗褪色到底部。我认为最好的方式来实现这是使用伪元素。我不太在乎IE支持，因为它是这么小的细节。

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.

所以，这里是我有：

.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!

您可以在这里看到它的操作： http：// goo。 gl / RupQa

You can see it in action here: http://goo.gl/RupQa

这是标题菜单上方的黄色标志。为什么我在图片上方看不到20x20红色框？父类（ .trygg-ehandel-icon ）是绝对定位的，因此伪元素应该相对于它显示，是吗？

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?

我已经尝试修复这个问题超过一个小时，有什么建议吗？

I've been trying to fix this for over an hour now, any suggestions?

推荐答案

a href =http://stackoverflow.com/questions/5843035/>。

As answered in this question.

使用之前和之后的标签不适用于大多数浏览器，

Using before and after psuedo-elements with the img tag does not work in most browsers, by design.

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

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.

上面链接的文章列出了两种解决方案。 CSS的工作环境本质上是非常黑的，而jQuery的解决方案更加优雅，但取决于Javascript是否被启用和jQuery库被包括。

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：伪元素不显示在< img&gt ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！