Esta pregunta ya tiene una respuesta aquí:

Tengo una imagen que se desliza hacia arriba desde el menú cuando la pasa por encima. Debido a que está oculto debajo del menú, quiero darle un poco más de profundidad a la imagen agregando un desvanecimiento oscuro en la parte inferior. Pensé que la mejor manera de lograr esto es usar pseudo elementos. Realmente no me importa mucho el soporte de IE ya que es un detalle tan pequeño.

Entonces, esto es lo que tengo:

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

Primero, no estoy seguro de si usar dos puntos o dos puntos antes del "después". Siempre he usado uno, pero recientemente noté que las personas usan dos, entonces, ¿cuál es el camino a seguir? ¡Parece que funciona!

Puedes verlo en acción aqui:http: //goo.gl/RupQ

Es el logotipo amarillo que aparece sobre el menú del encabezado. ¿Por qué no veo un cuadro rojo de 20x20 encima de la imagen? El padre .trygg-ehandel-icon) está en una posición absoluta, por lo que el pseudo elemento debería aparecer en relación con él, ¿verdad?

He estado tratando de arreglar esto por más de una hora, ¿alguna sugerencia?