Algo errado

Lembrou de colocar o position: relative; em .icones-redes-sociais a ?

Olá, estou com o mesmo problema, os nomes das redes sociais estão aparecendo...

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


.icones-redes-sociais a {
    width: 40px;
    height: 40px;
    display: block;
    position: relative;
}


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

Boa tarde Igor, tudo bem?

Aparece os escritos por que tem que ser mantido o css onde estiliza o text-ident no elemento a segue exemplo abaixo:

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

O seu HTML deveria estar desta forma: `

• Github
• Twitter
• LinkedIn

.icones-redes-sociais a:hover::after,
.icones-redes-sociais a:focus::after {
    content: attr(data-legenda);
    text-align: center;
    color: #FFF;
    background-color: #000;
    position: absolute;
    left: 0;
    text-indent: 0;
    line-height: 2;
}