1
resposta

Qual é a diferença entre usar ::after e ::before?

Olá!

No exercício 6 da aula 9 a resposta do professor diz para colocar ".icones-redes-sociais a:hover::after" para aparecer a caixinha com a legenda. Mas no próximo, o do exercício 7 diz para criar o balão usando a pseudoclasse before. É o mesmo comando, teoricamente poderia ser usado no mesmo bloco, não?

No exercício 6 eu alterei para "before" pra ver a diferença e não deu nenhuma. Porque um é usado ::after e no outro ::before?

Sei que já tem uma dúvida a respeito respondendo a mesma questão, mas postei essa para especificar essa situação mesmo.

Obrigado.

1 resposta

Lucas, boa tarde!

Eles diferem aonde esse elemento fantasma será criado.

Em CSS, ::after cria um pseudo-elemento que é o último filho do elemento selecionado. Muitas vezes é usado para adicionar e melhorar o conteúdo de um elemento como a propriedade content. É inline por padrão

Já o ::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.

No curso

https://cursos.alura.com.br/course/html5-css3-design-responsivo

Nós falamos sobre Pseudoelmentos, inclusive recomendamos fazer os novos cursos

Espero ter ajudado e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software