English
EspañolGerador de sublinhado animado para links (CSS)
Escolha o efeito e passe o mouse (ou o Tab) nos links da prévia. O código usa background-size, que funciona em links de várias linhas.
Links com sublinhado que se mexe
Este parágrafo tem um link curto e também um link bem mais comprido que pode quebrar em duas linhas no celular para testar o efeito.
Disponível em: 
Gerador de sublinhado animado para links (CSS): para que serve
Um sublinhado que anima ao passar o mouse dá acabamento aos links de menus e textos. Feito com ::after, ele só funciona em links de uma linha; este gerador desenha a linha com background-image e anima o background-size, o que funciona mesmo quando o link quebra.
Escolha entre cinco efeitos (cresce da esquerda, do centro, desliza, marca-texto e ondulado), a cor, a espessura e a duração. Uma linha fina fica sempre visível por padrão, para o link se diferenciar do texto como pede a WCAG 1.4.1, e o efeito aparece também no foco do teclado.
Como usar
- Escolha o efeito.
- Ajuste a cor, a espessura e a duração.
- Copie o CSS e aplique a classe nos links.
Quando usar
- Menus de navegação.
- Links dentro de artigos.
- Rodapés e listas de links.
Perguntas frequentes
Por que usar background e não um ::after?
Com um pseudo-elemento ::after a linha só funciona em links de uma linha. Desenhando o sublinhado com background-image e animando o background-size, a linha acompanha o texto mesmo quando o link quebra em duas linhas.
O link continua parecendo link?
No meio de um parágrafo, o link precisa se diferenciar do texto mesmo sem o mouse em cima (WCAG 1.4.1). Por isso a opção de deixar uma linha fina sempre visível vem marcada; o efeito anima por cima dela.
E no celular?
No celular não há passar o mouse; o efeito aparece no foco e ao tocar. A linha base visível garante que os links sejam reconhecidos.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.