To pytanie ma już odpowiedź tutaj:

Mam obraz, który przesuwa się z menu po najechaniu nim kursorem. Ponieważ jest ukryty w menu, chcę nadać dolnej części obrazu nieco głębi, dodając ciemny zanik na dole. Uznałem, że najlepszym sposobem na osiągnięcie tego jest użycie pseudoelementów. Tak naprawdę nie dbam o obsługę IE, ponieważ jest to tak mały szczegół.

Więc oto co mam:

.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;
  } 

Po pierwsze, nie jestem pewien, czy użyć podwójnych czy pojedynczych dwukropków przed „po”. Zawsze korzystałem z jednego, ale ostatnio zauważyłem, że ludzie używają dwóch, więc jaka jest droga? Albo wydaje się, że działa!

Możesz zobaczyć to tutaj:http: //goo.gl/RupQ

To żółte logo wyskakujące nad menu nagłówka. Dlaczego nie widzę czerwonego pola 20 x 20 nad obrazem? Rodzic .trygg-ehandel-icon) jest pozycjonowane bezwzględnie, więc pseudo element powinien pojawić się względem niego, prawda?

Próbuję to naprawić od ponad godziny, jakieś sugestie?