How to make an animated dash appear in CSS?

Question

css

How to make a dash that appears on top when hovering over a menu item? I did it with help, border-top: 5px solid #fff;but the animation doesn't look right - the menu item itself shifts. How to implement it correctly?
ps page layout through bootstrap
My implementation:

Answer 1

When adding from above border-top: 5px solid #fff;
Add property as well margin-top: -5px;
Or you can set it initially and specify
it on hoverborder-top: 5px solid #fff;

Answer 2

Another option is to use box-shadow: inset - an inner shadow.
either without hover - padding, with - remove padding and add border

Answer 3

Part of css code for navigation:

/*all statement*/

.navbar-nav > li > a {
  color: #fff;
  font-size: 15px;
  font-family: 'Myriad Pro';
  color: rgb( 255, 255, 255 );
  text-transform: uppercase;
  padding-top: 35px;
  display: inline-block;

}

.navbar-default .navbar-nav > li > a {
  color: #fff;
   -webkit-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}

/*active statement*/

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  background: none;
  color: #fff;
  padding-top: 30px;
  border-top: 5px solid #fff;

}

/*hover statement*/

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  background: none;
  color: #fff;
  padding-top: 30px;
  border-top: 5px solid #fff;
}