Nada aparece

Olá, pessoal. Fiz o procedimento igual o exercício aponta, mas nada acontece quando passo o mouse por cima do elemento, alguém poderia me ajudar pra saber onde está o erro? Obrigado!

<ul class="icones-redes-sociais">
                <li>
                    <a class="github" href="https://github.com/joaodasilva" data-tooltip="Veja meus projetos opensource">
                        Github
                    </a>
                </li>
                <li>
                    <a class="twitter" href="https://twitter.com/joaodasilva" data-tooltip="Siga-me no Twitter">
                        Twitter
                    </a>
                </li>
                <li>
                    <a class="linkedin" href="https://br.linkedin.com/pub/joão-da-silva/32/4/508" data-tooltip="Veja meu currículo">
                        LinkedIn
                    </a>
                </li>
            </ul>

.icones-redes-sociais a {
    width: 2rem;
    height: 2rem;
    display: block;
    text-indent: -99999px;
    position: relative;
}

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

O exercício é para que apareça o data-legend quando passo o mouse sobre o link, mas nada acontece.