CSS: после того, как псевдоэлемент не отображается на <img>? [Дубликат]

На этот вопрос уже есть ответ:

CSS: после не добавления контента к определенным элементам 3 ответа

У меня есть изображение, которое скользит вверх из меню, когда вы наводите его. Поскольку он скрыт под меню, я хочу сделать нижнюю часть изображения немного размытой, добавив темное затухание к нижней части. Я решил, что лучший способ добиться этого - использовать псевдоэлементы. Меня не очень заботит поддержка 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/RupQ

Над заголовком появляется желтый логотип. Почему я не вижу красную рамку 20x20 над изображением? Родитель .trygg-ehandel-icon) имеет абсолютное положение, поэтому псевдоэлемент должен отображаться относительно него, верно?

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

Ответы на вопрос(1)

Ваш ответ на вопрос