Não entendi muito bem essa animação. Quem faz a linha sublinada aparecer? o "content" dentro do &::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 entendi muito bem essa animação. Quem faz a linha sublinada aparecer? o "content" dentro do &::after ?
Olá, Marcos, como vai?
A linha sublinhada que aparece na animação não é gerada pelo content em si, mas sim pelos estilos aplicados ao ::after. O content: "" apenas cria o espaço necessário para que o pseudo-elemento ::after exista. A aparência da linha é definida pelas propriedades width, height, background-color e position.
No início, o width está em 0, então a linha é invisível. Quando ocorre o hover ou focus, o width passa para 100%, e como há uma transição configurada (transition: width 0.3s ease), a linha se expande suavemente da esquerda para a direita, criando esse efeito de sublinhado animado.
Espero ter ajudado!
Siga firme nos seus estudos e conte com o fórum sempre que precisar.
Abraços :)