Uma das vantagens de criar meu site pessoal do zero, em vez de usar um tema pronto, é que começo com as configurações padrão do navegador e gradualmente adiciono minhas próprias cores. Eu tento evitar que o site fique inchado, mas a personalização é uma coisa importante. Precisamos encontrar um compromisso entre as páginas espartanas do Hacker News e Craigslist, por um lado, e o congestionamento do antigo MySpace, por outro.

De alguma forma, me deparei com um site com sublinhados animados para links e queria perceber o efeito. Mas é importante para mim usar CSS puro, porque, para o bem de tais coisas frívolas, não vale a pena adicionar JavaScript, o que pode causar problemas com o desempenho ou a usabilidade da interface.

Aqui está a aparência do efeito agora:

Implementação

Desenhar linhas sob o texto é um tópico surpreendentemente complexo . Tudo depende de quão longe você está pronto para se desviar do padrão e de quais detalhes você se preocupa (por exemplo, passando por elementos remotos de letras ).

Eu explorei duas abordagens . Ambos, em essência, removem a decoração de texto padrão e adicionam uma borda simulada usando pseudo-elementos . Essa borda é então animada por transições CSS . Infelizmente, essas soluções têm uma desvantagem: elas não funcionam normalmente se o link cobrir mais de uma linha. O sublinhado aparece apenas na primeira linha.


No final, encontrei o CodePen de Shaw , desprovido dessa falha, e mudei o efeito para o meu gosto.


Aqui está o código relevante. Você pode brincar com ele em repl.it.

a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size .3s; } a:hover { background-size: 100% 2px; } 

Vamos considerar esta solução em mais detalhes.

Primeiro, desative a text-decoration padrão.

Teremos que usar uma imagem de fundo porque ela pode cobrir várias linhas. Embora você possa tirar uma foto real, é apenas uma linha, por isso usamos um gradiente linear que irá gerar uma imagem para nós. Normalmente, ele é usado para criar um gradiente entre duas cores diferentes, mas precisamos que o sublinhado seja da mesma cor que o link, portanto, usamos currentColor para o início e o final do gradiente. currentColor diz ao navegador para usar a cor do elemento na propriedade color .

Use a posição de fundo para colocar a imagem no canto inferior esquerdo. Um valor de 0% corresponde a uma posição horizontal e 100% corresponde a uma posição vertical.

Desative a repetição em segundo plano para impedir várias instâncias da imagem.

Usando o tamanho do plano de fundo, especifique a largura e a altura zero de dois pixels. A largura zero significa que o sublinhado aparece apenas em foco, caso contrário, a imagem não é visível.

Defina a transição para caber no plano de fundo, para que qualquer alteração de propriedade leve 0.3 segundos.

Quando você passa o mouse sobre um link, alteramos a largura da imagem em 100% , criando um sublinhado completo e a transition fornece animação.

Isso é tudo! Estou muito satisfeito com a brevidade do código. Se você deseja adicionar algo semelhante ao seu site, sinta-se à vontade para fazer essa implementação ou ver outros efeitos de sublinhados animados .