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

Как ответил в этом вопросе.

Использование before и after psuedo-элементов с тегом img не работает в большинстве браузеров, по дизайну.

Теги изображения являются самозакрывающимися (<tag />) тегами, поскольку они не содержат содержимого. Так как они не содержат какого-либо контента, к существующему контенту не может быть добавлено сгенерированное содержимое (::after) или добавлено (::before).

В приведенной выше статье перечислены два решения для работы. Работа с CSS очень халатная по своей природе, в то время как решение jQuery намного более элегантно, но зависит как от включенного Javascript, так и от библиотеки jQuery.