--- Onehack.us e-Learning Platform --- 1
Hello everybody in this lesson we are going to build left to right and right to left effects 2
let's start again we will start by selecting our first item first link background color 3
green let's check refresh and you can see we selected our item again we will work on 4
pseudo element therefore at the beginning we will create our pseudo element let's do 5
let's come here after 6
quickly let's write content 7
and again we will use position absolute to reduce the side effects position absolute width 8
100 percent height five pixels and also let's position our item to bottom 9
bottom zero left zero right zero 10
lastly let's define the background color background color red 11
refresh and you can see our pseudo item so we want to create an effect which will start from left 12
to right this means our item's position will start from 0 to 100 percent to right 13
so this means we can use width property to transition let's come here and remove this 14
make this zero and let's define our hover state first link hover after let's make this 100 percent 15
refresh and you can see our item is not visible when we hover out because the width of the item is 16
zero and when we hover on it's shown because the width is 100 and let's define the transition 17
transition width 0.5 second ease out I want to remove 18
left and right to make everything clear I will explain everything step by step 19
you can see it behaves differently before hover on our link the pseudo element is located to here 20
the right corner because we haven't specified its left and right position 21
this means initially we need to position our pseudo element to here it should start 22
from left and then going to right like this refresh you can see it's going to left to right 23
zero to 100 percent you can see again I want to add a border radius 24
border radius and also let's make the color as setting this color from our previous lesson d04 25
and it seems perfect you can see our underline effect is starting from left to right you can 26
see I think it's everything is clear initially the item the pseudo item has no width therefore 27
it's not visible but we have to position it to accurate place otherwise it will start from here 28
so you can see it seems very nice effect the solution is very explicit obvious from left 29
to right we positioned our initial position to left from right to left we need to position our 30
initial position to right let's implement close this close this copy this let's make the second 31
second in that time we need to change the position initial position of our pseudo element to right 32
right zero 33
let's check you can see it works perfectly because our item is initially in here with zero width but 34
when we hover on our item the sudo element is trying to increase its width to 100 percent 35
to achieve this it should start from right to left because its initial position is here 36
yes we completed our effects from right to left and from left to right that's it for now 37
see you on next lesson