2
respostas

[Dúvida] Como remover os Links do footer

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

  <footer class="rodape">
         <img src="img/Logo.png" alt="Logo alura">
         <ul class="rodape__lista">
            <li class="lista__link"><a href="#">Idioma</a></li>
            <li class="lista__link"><a href="#">Dispositivos compatíveis</a></li>
            <li class="lista__link"><a href="#">Contrato de assinatura</a></li>
            <li class="lista__link"><a href="#">Política de privacidade</a></li>
            <li class="lista__link"><a href="#">Proteção de dados no Brasil</a></li>
            <li class="lista__link"><a href="#">Anúncios personalizados</a></li>
            <li class="lista__link"><a href="#">Ajuda</a></li>
         </ul>
        <p class="rodape__texto">® 2021 Alura, Alura+ e Alura Língua. Todos os direitos reservados. Serviço de
            assinatura paga. Conteúdo sujeito a disponibilidade.</p>
        <p class="rodape__texto">Alura+ é um serviço pago, baseado em assinatura e sujeito a termos e condições. O
            serviço Alura+ é comercializado por Aovs Sistemas de Informática S.A., Rua Vergueiro, 3185 - Liberdade, São
            Paulo - SP, 04101-300, Brasil e CNPJ 05.555.382/0001-33</p>
    </footer> 
com  o css 

.rodape{
padding: 5em;
text-align: center;
text-decoration: none;
}
.rodape__lista{
display: flex;
justify-content: center;
list-style-type: none;

}
.lista__link{
padding: 0.5em;
text-decoration: none;
color: var(--branco-principal);
} utilizei um text-decoration: none; na classe pai do meu footer mas , mesmo assim os links continuam azul padrão e clicáveis , como remover esta propriedade para deixa-los igual o protótipo ?

2 respostas

Oii, Lucas, tudo bem?

O que acontece é que as tags de link (<a>) possuem um estilo padrão muito forte definido pelo próprio navegador (aquele texto azul e sublinhado). Quando aplicamos text-decoration: none; e a cor nas classes pai, como a .rodape ou .lista__link, a tag <a> acaba "ignorando" essa herança porque o estilo padrão dela tem prioridade.

Para resolver isso e deixar os links com a cor que você definiu e sem o sublinhado, nós precisamos aplicar o estilo na tag <a> de forma direta no CSS.

Você pode ajustar o seu código passando as propriedades de cor e decoração para a tag a que está dentro da sua classe, desse jeitinho aqui:

.lista__link {
    padding: 0.5em;
}

/* Aqui nós acessamos diretamente o link dentro da lista */
.lista__link a {
    text-decoration: none;
    color: var(--branco-principal);
}

Dessa forma, o navegador entende exatamente quem deve receber o estilo e remove aquele visual padrão, deixando tudo igualzinho ao protótipo!

Faça esse teste no seu projeto e veja como fica. S

Bons estudos!

Sucesso

Imagem da comunidade

VALEU