nao aparece nada quando eu passo o mouse

Boa noite, Segue meu código.

<ul class="icones-redes-sociais">
            <li>
                <a href="https://github.com/joaodasilva" class="github" data-legenda="Veja meus Projetos Opensource">
                    Github
                </a>
            </li>
            <li>
                <a href="https://twitter.com/joaodasilva" class="twitter" data-legenda="Acompanhe e fique por dentro dos meus projetos">
                    Twitter
                </a>
            </li>
            <li>
                <a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508" class="linkedin" data-legenda="se precisar dos meus serviços..">
                    LinkedIn
                </a>
            </li>
        </ul>

.icones-redes-sociais a {

    position: relative;
}


.icones-redes-socias a:hover::after, 
.icones-redes-socias a:focus::after {

    content: attr(data-legenda);
    text-indent: 0;
    position: absolute;
    top:100%;
    right: 0;
    width: 300%;


    background-color: #000;
    font-size:.75em;
}