Нижняя линия границы меню навигации расширяется от середины

Question

Здесь у меня есть меню навигации

HTML

<ul>
  <li><a href="#">HOME</a><div></div></li>
  <li><a href="#">PAGE</a><div></div></li>
  <li><a href="#">ABOUT US</a><div></div></li>
  <li><a href="#">CONTACT US</a><div></div></li>
</ul>

Я сделал так, чтобы нижняя граница границы появлялась при наведении курсора и в активном меню. Но вопрос в том, как сделать эффект анимации.

SCSS

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  li {
    float: left;
    &:hover a {
      cursor: pointer;
      color: blue;
    }
    &:hover div,
    &.router-link-active div {
      border-bottom: 2px solid blue;
      border-width: thin;
      margin-left: 15%;
      margin-right: 15%;
    }
    a {
      display: inline-block;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      color: grey;
    }
  }
}

Вот ссылка codepen . Нужна анимация вроде эта . Но без удаления элемента div рядом с тегом привязки.

Answer 1

В приведенном вами примере используются псевдоэлементы CSS для эффекта, подобного границе.

HTML

   <ul class="nav">
        <li class="nav_item">Home</li>
        <li class="nav_item">About</li>
        <li class="nav_item">Contact</li>
        <li class="nav_item">help</li>
    </ul>

CSS

        .nav{
            list-style: none;
            position:fixed;
        }
        .nav_item{
            display:inline-block;
            padding:10px;
            font-size:25px;
            cursor:pointer;
        }
        .nav_item:after{
            content:'';
            display: block;
            margin: auto;
            height: 3px;
            width: 0px;
            background: transparent;
            transition: width .5s ease, background-color .5s ease;
        }
        .nav_item:hover:after{
            width:100%; /*change the width of the border like element*/
            background:red;
        }

Если вы хотите изменить ширину псевдоэлемента, измените ширину .nav_item:hover:after в CSS

Пример:

.nav_item:hover:after{
       width:50%;
       background:red 
 }

jsfiddle: https://jsfiddle.net/xjoerz56/2/