Animating Link Underlines

Link altı çizgilerini basit bir text-decoration: underline yerine, hover anında akıcı bir şekilde büyüyen bir çizgiyle değiştirmek küçük ama etkili bir detaydır.

En temiz yöntem background-image ile lineer bir gradyan çizip, background-size üzerinden animasyon vermektir:

.link {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.3s ease;
  text-decoration: none;
}

.link:hover {
  background-size: 100% 1px;
}

Bu yaklaşımın text-decoration-line animasyonlarına göre avantajı, tarayıcılar arası tutarlı çalışması ve çizginin kalınlığını/rengini tam kontrol edebilmemizdir.

Soldan sağa yerine ortadan büyüsün

background-position: center bottom kullanarak çizginin ortadan başlayıp iki yöne doğru büyümesini de sağlayabilirsiniz.