如何使用香草javascript或CSS设置边框动画

Question

I set border-bottom color to grey and add transiton to .3s, and ':hover' effect,so on hover it changes its color to blue. Problem is related with that: when I place my mouse over the element with hover effect the border i set(blue) emerges from top to bottom(falling effect).

this is it

Now my client wants border to emerge from left to right on hover and border shouldn't fade away on hover on another list item,it(border) have to 'lag behind' the cursor trying to 'catch on' the cursor and fill the next list item's border positon. I hope I you get what I want. I know that it's not possible to do in css,but i don't know how to do this in js,can someone help me with that and expalain to me what to do,without using any frameworks like jQuery.

Answer 1

You can animate by using the width property as Thusitha said.

Here I have attached the codepen link for that effect.

 ul { list-style-type: none; border-bottom: 5px solid #eee; } ul li { display: inline-block; position: relative; padding: 20px; } ul li:before { content: ""; position: absolute; height: 5px; width: 0px; bottom: -5px; left: 0; background: blue; transition: all linear 0.25s; } /* Expanding Animation Element */ ul li:hover:before { width: 100% } 

 <div class="box"> <ul> <li>Homepage</li> <li>Style Demo</li> </ul> </div>