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;

}

首先，我不确定是否在“之后”使用双重或单个冒号。我一直使用一个，但最近我注意到有人使用两个，所以有什么要走的？或者似乎工作！

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

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