Esta pergunta já tem uma resposta aqui:

Tenho uma imagem que desliza para cima no menu quando você passa o mouse. Como ele está oculto no menu, quero dar um pouco de profundidade à parte inferior da imagem, adicionando um desbotamento escuro à parte inferior. Eu achei que a melhor maneira de conseguir isso é usar pseudo-elementos. Eu realmente não me importo muito com o suporte ao IE, pois é um detalhe tão pequeno.

Então, aqui está o que eu tenho:

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

Primeiro, não tenho certeza se deve usar dois pontos ou dois pontos antes de "depois". Eu sempre usei um, mas recentemente notei pessoas usando dois, então qual é o caminho a percorrer? Qualquer um parece funcionar!

Você pode vê-lo em ação aqui:http: //goo.gl/RupQ

É o logotipo amarelo aparecendo acima do menu do cabeçalho. Por que não estou vendo uma caixa vermelha de 20x20 acima da imagem? O pai .trygg-ehandel-icon) está em posição absoluta, portanto o pseudo-elemento deve aparecer em relação a ele, cert

Estou tentando consertar isso há mais de uma hora, alguma sugestão?