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

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 6

??
I didn't understand your question.

Answer 7

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 8

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 9

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

Answer 10

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