In order to create that animated green background effect, we need to use the before pseudo element to insert the code before HTML elements. Now the reason that you don't see the green background initially is that it is hidden with the help of overflow: hidden property in the anchor element (line no. 23). Just remove this line to visually see what I actually mean. So basically the green background should be present already on the page and the hover effect just allows it to be visible. Hope that helps. :)
Can anybody explain why he added before pseudo class? Couldn't everything be done just with the hover pseudo class?
In order to create that animated green background effect, we need to use the before pseudo element to insert the code before HTML elements. Now the reason that you don't see the green background initially is that it is hidden with the help of overflow: hidden property in the anchor element (line no. 23). Just remove this line to visually see what I actually mean. So basically the green background should be present already on the page and the hover effect just allows it to be visible. Hope that helps. :)
Thank you so much. Yes, it did help.