How to make bottom-line animation deeper

Question

Claimer: I'm learning css basic and don't know what is this animation named. And i'm sorry if question like this shouldn't on stackoverflow.

I have this code in 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>

and this is in my 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;
}

and the result goes like this:

So, if i wanna make the line animation under the text deeper (exactly on the red bottom border). what should i change?

Sorry for bad english. Thanks in advance!

different ideas with less of code: https://stackoverflow.com/a/54616200/8620333 — Temani Afif, Apr 21 '20 at 19:20

score 2 · Answer 1 · answered Apr 21 '20 at 17:40

2

Use position:relative; with a top value:

.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>

answered Apr 21 '20 at 17:40

Anurag Srivastava

14,077
4
33
43

1

yes that's it. I ought to learn position to understand it now. Thank you so much, mate! – Lutfi Hanafiah Ramadhan Apr 21 '20 at 17:56
Shouldn't we opt from using fixed values when possible ? What happens when you'd feel like changing the padding ? – Rainbow Apr 21 '20 at 18:01
Oh my bad i didn't see that it was you. – Rainbow Apr 21 '20 at 18:22

Rainbow · Accepted Answer · 2020-04-21T18:16:43.750

Simple enough doesn't require an explanation, I kept the changes separate to make it clear, However if you have any question please do ask.

.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>

Not sure why this was downvoted, it is also a good approach. Maybe @downvoter could shed some light here.. — Anurag Srivastava, Apr 21 '20 at 17:53
the result is what i want, as your answer slightly different from top answer. I ought to learn about `position` property. thank you so much. — Lutfi Hanafiah Ramadhan, Apr 21 '20 at 17:55

How to make bottom-line animation deeper

2 Answers2