Как сделать нижнюю анимацию глубже

Question

Claimer: я изучаю css basi c и не знаю, как называется эта анимация. И я прошу прощения, если такой вопрос не должен возникать на stackoverflow.

У меня есть этот код в index.html

        <nav>
            <ul class="nav-links">
                <li class="nav-link"><a href="#">Beranda</a></li>
                <li class="nav-link"><a href="#">Produk</a></li>
                <li class="nav-link"><a href="#">Pengembang</a></li>
                <li class="nav-link"><a href="#">Kontak</a></li>
            </ul>
        </nav>

, и это в моем CSS:

.nav-link {
    margin: 0 32px;
    list-style: none;
    cursor: pointer;
    border: 1px solid red;
    padding: 30px 0px;

}

.nav-link::after{
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: rgba(93,92,100,1.0);
    transition: width .3s;
}

.nav-link:hover::after{
    width: 100%;
    transition: width .3s;
}

и результат выглядит следующим образом:

Итак, если я хочу сделать анимацию линии под текстом глубже (точно на красной нижней границе). что я должен изменить?

Извините за плохой английский sh. Заранее спасибо!

Answer 1

Используйте position:relative; со значением top:

.nav-link {
  margin: 0 32px;
  list-style: none;
  cursor: pointer;
  //border: 1px solid red;
  padding: 30px 0px;
}

.nav-link::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: rgba(93, 92, 100, 1.0);
  transition: width .3s;
  position: relative;
  top: 32px;
}

.nav-link:hover::after {
  width: 100%;
  transition: width .3s;
}

<nav>
  <ul class="nav-links">
    <li class="nav-link"><a href="#">Beranda</a></li>
    <li class="nav-link"><a href="#">Produk</a></li>
    <li class="nav-link"><a href="#">Pengembang</a></li>
    <li class="nav-link"><a href="#">Kontak</a></li>
  </ul>
</nav>

Answer 2

Достаточно просто, объяснений не требуется, я внес изменения отдельно, чтобы они были понятны. Однако, если у вас есть какие-либо вопросы, пожалуйста, задавайте.

.nav-link {
  margin: 0 32px;
  list-style: none;
  cursor: pointer;
  border: 1px solid red;
  padding: 30px 0px;
}

.nav-link::after {
  content: '';
  display: block;
  width: 0%;
  height: 2px;
  background: rgba(93, 92, 100, 1.0);
  transition: width .3s;
}

.nav-link:hover::after {
  width: 100%;
  transition: width .3s;
}



/* Solution */
.nav-link {
  position: relative;
}

.nav-link::after {
  position: absolute;
  bottom: 0;
}

<nav>
  <ul class="nav-links">
    <li class="nav-link"><a href="#">Beranda</a></li>
    <li class="nav-link"><a href="#">Produk</a></li>
    <li class="nav-link"><a href="#">Pengembang</a></li>
    <li class="nav-link"><a href="#">Kontak</a></li>
  </ul>
</nav>