2
respostas

Dúvida sobre tabulação e o text-indent

Fazendo esse exercício, percebi que ao navegar pelo site com o TAB as caixas pontilhadas que aparecem em torno dos links do github, twitter e linkedin ocupam horizontalmente o cumprimento da tela. Isso se dá graças ao text-indent que fizemos no texto dos links para ficarmos apenas com as imagens de background. Visualmente fica bem feio. Tentei consertar esse problema retirando o text-indent e trocando pela instrução color: transparent que também faria o texto dos links "sumir". O texto dos links sumiu como planejado, mas ao navegar com o TAB, as caixas pontilhadas não apareceram mais em volta dos símbolos do github, twitter e linkedin. A única forma que consegui fazer as caixas pontilhadas aparecerem ao redor dos símbolos de forma correta, foi trocando o texto dos links por um caractere vazio (alt + 255) e adicionando text-decoration : none no css. Contudo, posso perceber que ter um link representado por um caractere vazio não é semanticamente correto.

Existe uma forma de conseguir esconder o texto dos links e manter a caixa pontilhada de seleção em volta dos símbolos apenas?

2 respostas

Fala ai Eric, tudo bem? Consegue me mandar seu projeto? Pode ser através do Github ou Google Drive.

Assim eu conseguiria visualizar melhor o problema e facilitaria em ajudar você encontrar uma solução.

Fico no aguardo.

https://github.com/thommps/Alura-3D/raw/master/alura.zip

Essa é uma versão mais velha, de outra dúvida, a qual já tinha feito upload. Ela servirá, visto que a construção do menu lateral foi feita no curso 1 de css.

Reforçando a dúvida:

Usamos imagens de background para fazer os links do github, twitter e linkedin. Para desaparecermos com o texto de cima das imagens de background, usamos um text-indent: -99999px para mandar as palavras para fora da página à esquerda. Isso implica em uma caixa de seleção destes elementos que cruza praticamente a tela inteira (graças ao text-indent). Gostaria de saber se existe uma forma de esconder o texto dos links mantendo a caixa de seleção do elemento somente em volta das imagens de background. Lembrando que colocar a fonte do texto dos links transparente faz com que a caixa de seleção não apareça ao redor do elemento.