Animate a Border Below a Horizontal Nav Item from Left to Right - HTML CSS CSS Animatable Property

HTML CSS examples for CSS Animatable Property:border

  1. HOME
  2. HTML CSS
  3. CSS Animatable Property
  4. border

Description

Animate a Border Below a Horizontal Nav Item from Left to Right

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

.menuitem {<!--   w ww  .j a v  a  2s  .  com-->
   display: inline-block;
   margin-right: 30px;
   line-height: 30px;
   text-align: center;
}
.menuitem:after {
   content: '';
   display: block;
   height: 3px;
   width: 0;
   background: transparent;
   transition: width .5s ease, background-color .5s ease;
}
.menuitem:hover:after {
   width: 100%;
   background: blue;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="menuitem">
    Menu Item 
   <span></span> 
  </div> 
  <div class="menuitem">
    Menu Item 
   <span></span> 
  </div> 
  <div class="menuitem">
    Menu Item 
   <span></span> 
  </div> 
  <div class="menuitem">
    Menu Item 
   <span></span> 
  </div>  
 </body>
</html>

Related Tutorials