Border-Bottom Hover Effect

Question

Why is my hover effect from right to left not working?
https://code.sololearn.com/WC6KO5NuHKRI/#

Answer 1

if there is no relative element in the container elements it will go after the body, and all absolute ones will stack on each other, and for more specify, it is the "li" which has relative position, and the green bars ::after are called pseudo elements, those ones who have the absolute value

Answer 2

Change your name if you want people to help

https://code.sololearn.com/W0t42PCvG9Bd/?ref=app

do not use animation for hover, insted use transition
and do not give ids to many similar items
and border bottom width depends on its element width
so on hover you change the width of all the element from 100% to 100%

so you need another element, and this is pseudo element by ::after kryword

Answer 3

show us your code

Answer 4

It seems to work, a lime border appears under the hovered element, what's wrong?

Answer 5

Read the code, i want it to be animated so when you hovee the border comes from the left to right (not right to left)

Answer 6

Mohamed Ayaou thank u, one question, I know what position relative and absolute do in general but i dont get the meaning of it here. When i get rid of that position relative in line 24 my li::after does not work or works in a strange way. do u know the reasoning behind this?

Answer 7

the element with position absolute needs its container to has position relative to let top and right,bottom,left properties work
and the the absolute posotion lets you move the element as you want, if you remove it the pseudo element will come after the text

Answer 8

I looked it up and understand it a but better, but what does that have to do with it “seprating” my li::after?

Answer 9

??
I didn't understand your question.

Answer 10

Im not to sure how to explain it but go to yoir code nowand at line 24 get rid of the position relative and press run and youll get what i mean

Answer 11

Oh, that since li::after element have positions absolute for moving them to the bottom of its elements, and to stuck with its elements the it needs to be relative to hold the absolute elements
relative: makes the element movabel by top,left,.. etc properties, but it will move from its normal place
absolute: makes the element completly free from its original place and also can be moved by the same ways, but after it got free from its place it will fly to the nearest relative element in the html code

so I make the word a relative and no other changes, the I create pseudo element that will come after the word and I make it free by "absolute" to fly out of that place and it will go to the top and left of the word since it is relativ element, then I move it to the bottom by "bottom:100%"

Answer 12

Okay, but why have a position: relative; in line 24 when theres no top,left,bottom, or right involved?

Answer 13

you need it to make the absolute ones stick with tye relative ones, so when you remove it all the absolute elements will lose thier placese and go after the div

Answer 14

What if i get rid of the div? Then what does the absolute go after?

Answer 15

I get it

Answer 16

Oh ye, i dont think i aksed about this, but what about word spacing it dont work Mohamed Ayaou

Answer 17

Mohamed Ayaou Do u mind also helping me with my word-spacing, I think its not working cause of my display but im not sure

Answer 18

What do mean by that?
space between words verticaly can be done by adding margin-bottom to the li itself.

Answer 19

I want my HOME ABOUT SERVICE CONTACT to not be jammed together i want it to have more space so it is like HOME ABOUT SERVICE CONTACT, you can look up word-spacing on w3schools

Answer 20

Oh, I'm using sololearn from mobile so they are apuon each other, for tgat just add margin left to the li