how to animate css border bottom on hover

Solutions on MaxInterview for how to animate css border bottom on hover by the best coders in the world

showing results for - "how to animate css border bottom on hover"
Sohan
29 May 2017
1h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; }
2h1:after {
3  display:block;
4  content: '';
5  border-bottom: solid 3px #019fb6;  
6  transform: scaleX(0);  
7  transition: transform 250ms ease-in-out;
8}
9h1:hover:after { transform: scaleX(1); }
10h1.fromRight:after{ transform-origin:100% 50%; }
11h1.fromLeft:after{  transform-origin:  0% 50%; }
Lana
10 Jul 2016
1EASY! Just use the code by Expensive Earthworm but just replace the 
2h1 with the element you want the border-bottom to be animated and applied 
3on.
4I KNOW THIS IS OBVIOUS BUT SOME ARE JUST GETTING STARTED
5SO YE
queries leading to this page
css border bottom animationborder bottom on hover without movinganimate bottom border left to rigth using bazier cssborder bottom animationanimating border bottom on hoverhow to add border bottom on hoveranimate bottom border button csscss border bottom animation on hoverborder bottom animation with pure cssborder bottom animation on hovertransition border bottom left to right css on hoverbottom border transition csscss animate border bottom on hoverhover box border bottom animation csscss animate bottom bordercss how to make border bottom transition from left to rightborder bottom fade cssanimate border bottom on hover csscss animate border bottom left to right 27how to animate border bottomsimple hover animation border bottom apparition csseffect hover border bottomborder bottom on hover animationcss animate border left to rightcss animate border left to right on page loadanimation css border bottombottom border animation from left to right cssborder bottom animation cssanimate a border bottom from left to rightcss hover border bottomanimate css border bottomtransition border bottom csscss border animation left to rightanimated bottom border on hovercss hover border animationcss bottom border transitioncss animate border bottom left to rightcss border bottom hoveradd border bottom on hover without movinghtml animated bottom border on hoverborder bottom animation cssborder bottom animation spread sidehow to make a smooth border bottom animation in csscss moving border animationhow to animate css border bottom on hoverborder bottom css animationhover border bottom animation cssadd bottom border on hovercss after hover border bottomborder bottom transition left to right csstransition css border bottomcss hover border bottom animationborder bottom to be fixed on hoverborder bottom hover effect csscss hover border movinghover effect 3a animate border bottomcss transition left to right border bottomhow to add border bottom on hover how to animate border in csscss border bottom on hoverhow to animate css border bottom on hover