ホバリング時のナビゲーションバー下の線

Question

私はこれについて多くを検索して見つけられませんでした。ここにnavbarと似たようなものを作るにはどうすればいいですか？下にある行がローディングバーのように見えます。 - 例：http://www.thecrewgaming.com/ CSSやjavascriptが必要な場合のみ可能ですか？感謝！ ありがとう！

私はこの

li:hover { 
    background-color: rgba(255, 245, 255, 0.2); 
    border-bottom-color: #abcdef; 
} 
li { 
    font-family: 'Poppins', sans-serif; 
    font-weight: bold; 
    color: #F5F5F5; 
    font-size: 0.8889em; 
    text-decoration: none; 
    font-weight: normal; 
    text-transform: uppercase; 
    border-bottom: 3px solid transparent; 
    padding-bottom: 0.125em;`` 
    transition: border-bottom-color 50ms linear 0s; 
} 

を試してみましたが、それは通常のラインとして表示され、上記のリンク先のページで読み込みバーが好きではありません。

Answer 1

それは非常に簡単です。

擬似セレクタ::afterでposition:absolute;プロパティを使用します。

フィドル、以下のコードを参照してください：

https://jsfiddle.net/cuv6bxs5/

li { 
 
    font-family: 'Poppins', sans-serif; 
 
    font-weight: bold; 
 
    color: red; 
 
    background-color: #404040; 
 
    float: left; 
 
    position: relative; 
 
    padding: 10px 20px; 
 
    overflow: hidden; 
 
} 
 

 
li::after { 
 
    background-color: red; 
 
    content: ""; 
 
    width: 0; 
 
    height: 3px; 
 
    left: 0; 
 
    bottom: 0; 
 
    transition: width 0.35s ease 0s; 
 
    position: absolute; 
 
} 
 

 
li:hover::after { 
 
    width: 100%; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
}

<ul> 
 
    <li>ONE</li> 
 
    <li>TWO</li> 
 
    <li>THREE</li> 
 
    <li>FOUR</li> 
 
</ul>

Answer 2

これを行うにはいくつかの方法があります。

疑似セレクタを使用してアニメーションにはtransitionを使用しました。

header .menu_links a { 
 
    display: inline-block; 
 
    font-weight: 600; 
 
    font-size: 14px; 
 
    height: 50px; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    overflow-x: hidden; 
 
    position: relative; 
 
    transition: .25s ease all; 
 
    background: gray; 
 
    text-decoration: none; 
 
    line-height: 45px; 
 
} 
 
header .menu_links a:after { 
 
    content: " "; 
 
    position: absolute; 
 
    display: block; 
 
    bottom: 0; 
 
    left: -100%; 
 
    height: 5px; 
 
    width: 100%; 
 
    background: #dd0034; 
 
    transition: .5s ease all; 
 
} 
 
header .menu_links a:hover:after { 
 
    left: 0; 
 
}

<header> 
 
    <div class="menu_links"> 
 
    <a href="#">Link A</a> 
 
    <a href="#">Link B</a> 
 
    </div> 
 
</header>