В този скрийнкаст се фокусираме върху линиите под връзките в горната част на долния колонтитул. Някак си се препъваме, за да разберем кои неща трябва да имат относително позициониране и какво не, за да можем да получим тези линии с размера и позицията, които трябва да бъдат.
Оцветяваме линията с градиент, използвайки простия фон Compass @mixin.
Ние решаваме, че превръщането на нивото на блокиране на връзките е доста странно, защото прави зоната за кликване твърде голяма. Знам, че това е странно нещо, което трябва да се каже, защото обикновено правенето на големи области, върху които може да се кликва, е добре, но в този случай можете да щракнете толкова далеч от текста на връзката, че е просто странно.
Трябва да се отбележи, че в крайна сметка в долния колонтитул псевдоелементите, създали редовете, са променени на обхвати. Това е така, защото исках да добавя към тях малко анимация при задържане и в момента не можете да използвате преходи или анимации на псевдо елементи в повечето браузъри.
„Лазерната“ анимация завърши по следния начин (някои вложения са пропуснати):
a ( color: white; /* etc */ > span ( position: absolute; pointer-events: none; bottom: 0; width: 100%; height: 1px; margin-bottom: 3px; left: 0; @include background(linear-gradient(left, white, white 5%, rgba(white, 0.25) 5%, rgba(white, 0))); background-position: 100% 0; @include background-size(200% 0); @include transition(background 0s linear); ) &:hover, &:focus ( color: $orange; > span ( background-position: -100% 0; @include transition(background 0.4s); ) ) )