Não entendi muito bem essa animação. Quem faz a linha sublinada aparecer? o "content" dentro do &::after ?
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 :)