リンク上のCSSホバー効果

Question

ヘイな男私はこのウェブサイトで使用されているリンクの影響に似たホバーを複製しようとしています - www.theweeknd.com。

私はすでにフォーラムでこれを検索しようとしていますが、これまでの回答はありません。

誰でもこれを行う方法を知っていますか？

Answer 1

ホバー上のリンクに：hover擬似要素を使用してCSSスタイルを適用できます。

https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

Answer 2

あなたはそのようなリンクのスタイルを実現するためにそれを使用することができますthis Fiddle

上のコードを確認してください。

.test{ 
 
    font-family: "Roboto Condensed",HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; 
 
    font-size: calc(.27778vw + 9.11px); 
 
    color: #fff; 
 
    font-weight: 400; 
 
    cursor: pointer; 
 
    transition: .2s color ease-in-out; 
 
    text-shadow: 0 1px 5px rgba(20,20,20,.3); 
 
    position: relative; 
 
    letter-spacing: .1em; 
 
    line-height: 40px; 
 
    height: 40px; 
 
    padding: 0 .5rem; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-flow: row nowrap; 
 
    flex-flow: row nowrap; 
 
    background-color: transparent; 
 
    background: transparent; 
 
    text-decoration: none; 
 
} 
 

 
.test:before { 
 
    content: ''; 
 
    height: 1px; 
 
    bottom: 8px; 
 
    left: 0; 
 
    width: 0; 
 
    background-color: #fff; 
 
    transition: .2s width ease-in-out; 
 
    position: absolute; 
 
} 
 

 
.test:hover{ 
 
    color: #888; 
 
    outline: 0; 
 
} 
 

 
.test:hover:before { 
 
    width: 100%; 
 
}

<div style="height: 140px; background: #000"> 
 
    <ul> 
 
    <li style="width: 48px"><a class="test" href="google.com">Home</a></li> 
 
    </ul> 
 
</div>