Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Não entendi o uso do ::before/after

Referente ao curso JavaScript: consumindo e tratando dados de uma API

por tulio isaak silva barbosa
| 43.3k xp | 2 posts

No começo do arquivo "estilos.css", tem o seguinte código:

*,
*::before,
*::after {
    --azul-profundo: #01080E;
    --azul-escuro: #041832;
    --azul-medio: #144480;
    --azul-destaque-light: #1875E9;
    --azul-destaque-dark: #3985D8;
    --cinza-escuro: #222222;
    --cinza-medio: #C5C5C5;
    --cinza-claro: #F2F2F2;
    --branco: #FFFFFF;
    box-sizing: border-box;
}

Eu entendi que "::before/after" serve para fazer uma alteração, mas fiquei com duas dúvidas:

  1. Qual a vantagem de utilizar o código <a class="menu__itens" href="#"><i class="icone__inicio icone-item"></i><span>Início</span></a> ao invés de simplesmente usar <img>.
  2. Não entendi esse código acima (que foi utilizado no arquivo "estilos.css".
1 resposta
por Estudante
| 568.5k xp | 1338 posts

Usar o código <a class="menu__itens" href="#"><i class="icone__inicio icone-item"></i><span>Início</span></a> é massa porque dá mais liberdade e controle na hora de estilizar. A tag <i> é tipo o coringa dos ícones, onde você pode mexer fácil no tamanho, cor, e outras coisas com o CSS. E o <span> ali permite jogar um texto junto com o ícone, coisa que seria mais complicada com <img>.

E sobre o código no "estilos.css", aquilo é meio que uma reset geral de alguns estilos. O * pega todos os elementos na página, e ::before e ::after são como truques pra colocar conteúdo antes ou depois do conteúdo de um elemento. Mas, nesse caso, eles estão lá pra garantir que todos os elementos e pseudo-elementos usem box-sizing: border-box;, que é tipo uma parada pra deixar o layout mais na régua. E aquelas linhas com -- são tipo variáveis CSS, guardando cores pra usar em vários lugares no site, o que deixa a vida mais fácil na hora de mexer nas cores.