Animation of the Bootstrap menu item

Good day, gentlemen!

Could you tell me how to implement the selection of the active menu section on the site. As a guide, I chose this example http://bayguzin.ru/demo2016/synthetica/

I use the standard bootstrap menu without any critical changes. The changes relate only to the appearance: width, color.

Would be extremely grateful for any outline of the implementation of menu highlighting as an example, just highlighting to me it is necessary from above.

Dear Elena gave a code snippet for implementing such an underscore from the bottom, I don't quite understand what can be changed to make it a highlight from the top :D

Thank you in advance!

Sample Elena code:

.nav>li>a:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: #7AE2DE;
  transition: all .2s ease-in-out;
  transform: scaleX(0);
}

.custom-menu.navbar .navbar-nav>li>a:focus, 
.custom-menu.navbar .navbar-nav>li>a:hover{
  color: #7AE2DE;
}

.custom-menu .nav>li>a:hover:after {
  transform: scaleX(1);
}

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
  
<nav class="navbar navbar-default custom-menu" >
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>