Блог

Главная - Вопросы по программированию - Анимация подчеркивания меню CSS

Анимация подчеркивания меню CSS

#html #css #bootstrap-4

Вопрос:

Я пытаюсь следовать этому учебнику по codepen, чтобы сделать анимированное подчеркивание, когда пользователь наводит курсор на ссылку на панели навигации. В настоящее время у меня появляется строка, но под всем списком навигации отображается только одно подчеркивание. Я пытаюсь добиться появления строки под зависшей ссылкой.

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

Любая помощь будет признательна, спасибо!

Ответ №1:

вам нужно добавить относительную позицию .link , чтобы подчеркивание было относительно позиции ссылки. а затем просто установите верхнее или нижнее положение подчеркивания, чтобы оно отображалось в нижней части ссылки.

.link { position: relative }

Ответ №2:

Вы должны просто добавить этот элемент в CSS:

 .link {
  padding: 20px 0px;
  display: inline-block;
  position: relative;
}
Метки: