CSS: после псевдоэлемента не отображается на <img>?

У меня есть изображение, которое скользит из меню, когда вы его наводите. Поскольку он скрыт под меню, я хочу дать нижней части изображения немного деф, добавив темное увядание на дно. Я решил, что лучший способ добиться этого - использовать псевдоэлементы. Мне не очень нравится поддержка IE, так как это такая маленькая деталь.

Итак, вот что у меня получилось:

.header-section .trygg-ehandel-icon {
    position: absolute;
    top: 45px;
    right: 280px;
    z-index: 0;
    display: block;
    // Stripped out some transition style here
  }

  // Here 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) является абсолютным, поэтому псевдоэлемент должен отображаться относительно него, правильно?

Я пытаюсь исправить это уже более часа, любые предложения?

Ответ 1