CSS Linklere Animasyon Ekleme

Klasik altı çizgili yazıları hareketli hale getirmeye ne dersiniz? CSS3’ün after tanımlamasıyla birlikte bu işlemi yapmak mümkün.

lk olarak linklerimize satır yüksekliği, inline-block yapısı tanımlayalım.

a {

line-height: 1;

display: inline-block;

color: #ffff00;

text-decoration: none;

        font-weight: bold;

        cursor: pointer;

}

Daha sonra varsayılan after tanımını düzenleyelim. Burada çizgiyi 0 piksel yapalım ki hover olmadığı sürece gözükmesin. Ayrıca geçiş efektini (transition) de bur kısımda tanımlayacağız.

a:after {

display: block;

content: "";

height: 2px;

width: 0%;

background-color: #ffeb3b;

transition: width .3s ease-in-out;

}

Şimdi de üzerine gelindiğinde veya focus olunduğunda çizgiyi 100% genişliğe uzatalım.

a:hover:after,

a:focus:after {

width: 100%;

}

kendime notlar...