PSEUDOELEMENTOS

.icones-redes-sociais a:hover::after,.icones-redes-sociais a:focus::after{
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    right: 0;
    text-indent: 0;
    width: 300%;
    background: black;
    font-size: .75em;
    color: white;
}

.icones-redes-sociais a:hover::before,.icones-redes-sociais a:focus::before{
    content: '';
    width: 1em;
    height: 1em;
    background-color: black;
    transform: translateY(.5em) rotate(45deg);
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: black;

}

Estou com dúvida em relação ao uso do "after" e "before" para criar o balão.Porque no primeiro código ele usou after e no segundo ele usou before?E como ele conseguiu criar aquela ponta que interliga o link e a frase? ele fez isso no "before",mas não sei como...é como se ele pegasse apenas uma parte do bloco,mas não entendi como ele fez isso