CSS:在伪元素不显示之后?

前端之家收集整理的这篇文章主要介绍了CSS:在伪元素不显示之后?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > CSS :after not adding content to certain elements
当您悬停时,我有一个从菜单中的幻灯片放映的图像。因为它隐藏在菜单下面,我想通过在底部添加一个黑暗的褪色,给图像的底部一点点。我认为最好的方法是使用伪元素。我不太在意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

这是标题菜单上方的黄色标志。为什么我看不到图像上方的20×20红色框?父(.trygg-ehandel-icon)是绝对定位的,所以伪元素应该显示出来,对吗?

我一直在试图解决这个问题超过一个小时,有任何建议吗?

解决方法

正如 in this question

使用前后psuedo元素与img标签在大多数浏览器,设计不起作用。

图片标签是自封闭(< tag />)标签,因为它们不包含任何内容。由于它们不包含任何内容,所以不能将生成内容追加到(::之后)或前缀(:: before)到现有内容中。

上面列出的文章列出了两个解决方案。 CSS解决方法本质上是非常诡异的,而jQuery解决方案更加优雅,但取决于启用的Javascript和包含的jQuery库。

猜你在找的CSS相关文章