Merhaba arkadaşlar , Birçok sitede gördüğümüz css olayından bahsetmek istiyorum.Bu olay yazı veya link üzerine gelince altında yavaşça ilerleyen çizginin nasıl yapıldığını hakkında bilgi vericem.Öncelikle bana bu konuda yardımcı olan ve herzaman CSS konusunda destek çıkan @YasinSoftaoğlu kardeşime teşekkür etmek isterim :)

Yapmamız gereken öncelikle bir link oluşturmak.

<a href="link">Anasayfa</a>

gördüğünüz üzere link'e link isimli bir class atadık.Şimdi bu linkimize position:relative; değerini vermemiz gerekiyor.

.link 
{
  text-decoration:none;
  position:relative;
}

Sıra geldi linkimizin altına çizgimizi oluşturmaya linkimizden sonra gözükmesini istediğimiz için before kullanıcaz.

.link::before 
{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:0px;
  height:3px;
  background:#000;
  opacity:0;
  -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

Evet burada linkimizin altında suanda bir çizgi var ancak opacity 0 oldugu için ve width:0%; oldugu için göremiyoruz amacımız link üzerine gelince bunu göstermek bunun içim ise :hover:before kullanıcaz.

.link:hover:before
{
  opacity:1;
  width:100%;
}

evet artık linkimizin üstüne gelince altından çizgi çıkıcak :)

Ben canlı canlı görmek isterim diyen arkadaşlar için ise ;