ホバータイムのナビゲーションリストの左から右にフェードイン/アニメーションの下限枠を設定する方法は？

私は、ホバータイムのナビゲーションメニューの左から右へのフェードイン効果を与えようとしています。ここで私は、私はコードホバータイムのナビゲーションリストの左から右にフェードイン/アニメーションの下限枠を設定する方法は？

<nav class="navbar navbar-expand-sm navbar-light"> 
     <ul class="navbar-nav ml-auto"> 
      <li class="nav-item"><a class='nav-link' href="#">Home  </a></li> 
      <li class="nav-item"><a class='nav-link' href="#">About Us </a></li> 
      <li class="nav-item"><a class='nav-link' href="#">Portfolio </a></li> 
      <li class="nav-item"><a class='nav-link' href="#">Contact Us</a></li> 
     </ul> 
</nav>

の下にしようとしたブートストラップ4を使用しています私は今、私のナビゲーションが画像の下に見える境界線

.navbar a:hover { 
    border-bottom: 1px solid #444; 
    color: black; 
}

ためのシンプルなCSSを追加しました。

今、私は助けを必要とするか、ホバー時にボーダーの右フェードイン/アニメーション効果に委ね与えることを示唆しています。

出典

2017-11-27 Alimon Karim

これはあなたを助けることがあります。https://codepen.io/martinwolf/pen/eNNdme –

あなたは、私はそれを解決したパテルを@Manishありがとうございました！ –

add class line to <a class="line"></a> as below 
<html> 
<li class="nav-item"><a class='line nav-link' href="#">Home  </a></li> 
</html> 
<style> 
.line { 
    display: inline; 
    position: relative; 
    overflow: hidden; 
} 
.line:after { 
    content: ""; 
    position: absolute; 
    z-index: -1; 
    right: 0; 
    width: 0; 
    bottom: -5px; 
    background: #000; 
    height: 4px; 
    transition-property: width; 
    transition-duration: 0.3s; 
    transition-timing-function: ease-out; 
} 
.line:hover:after, 
.line:focus:after, 
.line:active:after { 
    left: 0; 
    right: auto; 
    width: 100%; 
} 
</style>

出典

2017-11-27 06:56:04 Raj

ホバータイムのナビゲーションリストの左から右にフェードイン/アニメーションの下限枠を設定する方法は？

答えて

関連する問題