Não entedi quando usar e pra que usar o "::before" e "::after".
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Não entedi quando usar e pra que usar o "::before" e "::after".
Os pseudo-seletores no CSS servem pra você manipular os elementos fora da box-model (i.e. fora de border, padding, margin). Você geralmente usa pra criar elementos como linhas, formas geométricas, escrever textos, etc quando precisa que isto esteja disposto dentro ou fora de seu elemento mas começando a partir de seu início (::before) ou de seu final (::after).
"::before cria um pseudo-elemento que é o primeiro filho do elemento atingido. É frequentemente utilizado para adicionar conteúdo decorativo à um element utilizando a propriedade content. Este elemento é inline por padrão."
Referência da documentação https://developer.mozilla.org/pt-BR/docs/Web/CSS/::before