Diese Frage hat hier bereits eine Antwort:

Ich habe ein Bild, das so aus dem Menü hervorgeht, wenn Sie den Mauszeiger darüber bewegen. Weil es unter dem Menü versteckt ist, möchte ich dem unteren Teil des Bildes ein wenig Tiefe verleihen, indem ich dem unteren Teil eine dunkle Überblendung hinzufüge. Ich dachte, der beste Weg, dies zu erreichen, ist die Verwendung von Pseudoelementen. Die IE-Unterstützung ist mir eigentlich egal, da es sich um ein so kleines Detail handelt.

Also, hier ist was ich habe:

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

Zuerst bin ich mir nicht sicher, ob ich vor "nach" doppelte oder einzelne Doppelpunkte verwenden soll. Ich habe immer einen benutzt, aber in letzter Zeit habe ich bemerkt, dass Leute zwei benutzen. Wie geht es also weiter? Beides scheint zu funktionieren!

Sie können es hier in Aktion sehen:http: //goo.gl/RupQ

Es ist das gelbe Logo, das über dem Kopfzeilenmenü auftaucht. Warum sehe ich kein 20x20 rotes Kästchen über dem Bild? Das Elternteil .trygg-ehandel-icon) ist absolut positioniert, also sollte das Pseudoelement relativ dazu auftauchen, oder?

Ich habe über eine Stunde lang versucht, dieses Problem zu beheben. Irgendwelche Vorschläge?