Dúvida besta sobre BEFORE e AFTER

Olá, pessoal. Estou com uma dúvida em relação ao BEFORE e AFTER. Por que eu devo usar AFTER para mostrar o data-tooltip e não BEFORE? Aliás, se eu trocar o AFTER por BEFORE e passar o mouse por cima dos ícones das redes ele só mostra o quadradinho preto rotacionado. E se eu trocar o BEFORE por AFTER acontece a mesma coisa.

.redes a:hover::after,         
.redes a:focus::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    right: 0;
    text-indent: 0;
    width: 300%;
    background: black;
    font-size: .75em;
    text-transform: lowercase;
    color: #F2FFFC;
    text-shadow: 0 0 2px pink;
}
.redes a:hover::before,
.redes a:focus::before {
    content: '';
    width: 1em;
    height: 1em;
    background-color: black;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(.5em) rotate(45deg);
}