Блог

Главная - Вопросы по программированию - Как я могу создать границу от середины до края выбранного маркера навигационной панели?

Как я могу создать границу от середины до края выбранного маркера навигационной панели?

#html #css

#HTML #css

Вопрос:

Я хочу создать панель навигации с анимацией границ следующим образом https://youtu.be/AO60KQtb3N8 если я наведу курсор на ссылку, из нее выйдет полоска до середины. Я пробовал с анимацией, но строка не выходила из середины и не была такого же размера, как текст.

HTML

 <nav class="nav" >
    <div class="NavElements" >
        <div><a class="navList" href="">HOME</a></div>
        <div><a class="navList" href="">PRODUCT</a></div>
        <div><a class="navList" href="">CONTACT</a></div>
    </div>
</nav>

CSS

 .nav {
     display: flex;
     font-size: 16px;
     font-family: arial;
     height: 50px;
     border: solid 1px black;
}

/*@keyframes slideLine {
     0%   {border-bottom: solid 1px; width: 0%;}
     100% {border-bottom: solid 1px; width: 50%;}
}*/

.NavElements {
     text-align: center;
     margin: 0px 0px 0px 50px;
     display: flex;
     align-items: center;
}

.navList {
     float: left;
     margin: 0px 30px 0px 30px;
}

.navList:hover {
     animation-name: slideLine;
     animation-duration: 0.3s;
     position: relative;
     animation-fill-mode: both;
}

Ответ №1:

Вы можете использовать CSS для этого

 .grahical-underline a {
  position: relative;
  color: #000;
  text-decoration: none;
}

.grahical-underline > a:hover {
  color: #000;
}

.grahical-underline > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  text-align: center;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

.grahical-underline > a:hover:before {
  visibility: visible;
  transform: scaleX(1);
} 
 <h1 class="grahical-underline"><a href="#">Nisharg</a></h1>
Метки: