Saya mencoba mengikuti tutorial codepen ini untuk membuat garis bawah animasi saat pengguna mengarahkan kursor tautan di bilah navigasi. Saat ini, saya memiliki garis yang muncul tetapi hanya menunjukkan satu garis bawah di bawah seluruh daftar nav. Saya mencoba mencapai garis yang muncul di bawah tautan melayang.

.navbar-fixed-left .navList a.link {
  text-decoration: none;
}


/*Removing bullet points */

.navbar-fixed-left .navList li {
  list-style-type: none;
}

.link::before {
  transition: 300ms;
  height: 2px;
  content: "";
  position: absolute;
  background-color: #031D44;
}

.link-ltr::before {
  width: 0%;
  bottom: 10px;
}


/* Length of the line */

.link-ltr:hover::before {
  width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-fixed-left mt-4">
  <ul class="navList">
    <li><a class="link link-ltr" href="about.html">About</a></li>
    <li><a class="link link-ltr" href="resume.html">Resume</a></li>
    <li><a class="link link-ltr" href="projects.html">Projects</a></li>
    <li><a class="link link-ltr" href="databasediagram.html">Database Diagrams</a></li>
    <li><a class="link link-ltr" href="apiunittests.html">API Unit Tests</a></li>
    <li><a class="link link-ltr" href="bucketlist.html#">Bucket List</a></li>
  </ul>
</div>

Bantuan apa pun akan dihargai terima kasih!

0
john d 12 Mei 2021, 06:28

2 jawaban

Jawaban Terbaik

Anda perlu menambahkan posisi relatif ke .link sehingga garis bawah akan relatif terhadap posisi tautan. lalu atur saja posisi atas atau bawah garis bawah untuk membuatnya muncul di bagian bawah tautan.

.link { position: relative }

0
diane 12 Mei 2021, 03:46

Anda hanya harus menambahkan elemen ini di CSS:

.link {
  padding: 20px 0px;
  display: inline-block;
  position: relative;
}
0
KryBor_BK 12 Mei 2021, 03:57