CSS ile animasyonlu altı çizili metinler yapmak

Bu sıralar CSS ile yapabileceklerimiz konusunda codepen.io'da çok vakit geçiriyorum. Gördüklerimden güzel olanları burada paylaşmaya çalışıyorum. Bu yazıda animasyonlu altı çizli metinler yapmayı anlatmaya çalışacağım. Benim genelde basit ve kolay çözümler daha çok hoşuma gidiyor.  Çok eskilerde bu animasyonu genelde flash sitelerin menülerinde kullanıyorduk.

Bu animasyonu yapmak için farklı yöntemler(underline, background- box-shadow) var ancak elemanın :before sözde elemanı ile yapmak en mantıklısı.

a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 4px;
  bottom: 2px;
  left: 0;
  background: var(--underline-color);
  transform: scaleX(0);
  transition: transform 0.25s ease-out;
}

transform: scaleX(0); ile çizgiyi gizliyoruz. Aslında animasyonu da bunun üzerinden yapacağız.  Animasyonu transition: transform 0.25s ease-out; kodu ile ayarladık.

a:hover::before {
  transform: scaleX(1);
}

Sadece transform: scaleX(1); kodu ile animasyonu tamamladık.

Animasyonun yönünü değiştirebiliriz.

Soldan sağa animasyon

Burada sadece transform-origin: bottom left; kodu ile bunu değiştirebiliyoruz.

.soldan:before {
  transform-origin: bottom left;
}

Sağdan sola animasyon

Burada sadece transform-origin: bottom right; kodu ile bunu değiştirebiliyoruz.

.sagdan:before {
  transform-origin: bottom right;
}

Çok çeşitli örnekler var. Kaynaklar kısmına göz atmanızı öneririm.

Kalın sağlıcakla.

Kaynaklar

• https://codepen.io/VladykoD/pen/ZEYMmVg
• https://tobiasahlin.com/blog/css-trick-animating-link-underlines/
• https://css-irl.info/animating-underlines/
• https://codepen.io/jstn/pen/mdoOZJ?editors=1100
• https://tympanus.net/Development/LineHoverStyles/ Güzel örnekler
• https://paulund.co.uk/css-animation-link-underline