CSSのアンダーラインアニメーションが機能していません

Question

私はCSSのtransformでアニメーションをしようとしています。私は、リンク上にマウスを置くと、下線アニメーションを取得しようとしています。別のhtmlファイルでは、私は似たようなコードを持っています。何らかの理由でここでは機能しません。リンク上にカーソルを置くと、指定した白色に変わりますが、変換は表示されません。ナビゲーションバーのHTMLと関連するCSSを提供しました。

ul { 
 
    list-style-type: none; 
 
} 
 

 
li { 
 
    display: inline; 
 
} 
 

 
li a { 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 

 
.link:hover { 
 
    color: white; 
 
} 
 

 
.link:before { 
 
    content: ""; 
 
    visibility: hidden; 
 
    transform: scaleX(0); 
 
    transition: all 0.3s ease-in-out 0s; 
 
    background-color: #000; 
 
} 
 

 
.link:hover:before { 
 
    visibility: visible; 
 
    transform: scaleX(1); 
 
}

<nav> 
 
    <ul> 
 
    <li><a class="link" href="home.html">Home</a></li> - 
 
    <li><a class="link" href="code.html">Code</a></li> - 
 
    <li><a class="link" href="webpages.html">Webpages</a></li> - 
 
    <li><a class="link" href="articles.html">Articles</a></li> - 
 
    <li><a class="link" href="resume.html">Resume</a></li> 
 
    </ul> 
 
</nav>

Answer 1

だから、これを実現するためにCSSのいくつかのより多くの行を追加する必要があります。あなたの.link:beforeセレクタに：

position: absolute; 
bottom: 0; 
width: 100%; 
height: 1px; 

それは幅、高さプロパティと同様に、位置情報を必要とします。下線の位置は絶対的なので、親要素を相対（親に対して絶対的に配置されるように）に設定する必要があります。したがって、私たちは追加liセレクタに：あなたが起こることを期待しない何

ul { 
 
    list-style-type: none; 
 
} 
 

 
li { 
 
    display: inline; 
 
    position: relative; 
 
} 
 

 
li a { 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 

 
.link:hover { 
 
    color: white; 
 
} 
 

 
.link:before { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 1px; 
 
    content: ""; 
 
    visibility: hidden; 
 
    transform: scaleX(0); 
 
    transition: all 0.3s ease-in-out 0s; 
 
    background-color: #000; 
 
} 
 

 
.link:hover:before { 
 
    visibility: visible; 
 
    transform: scaleX(1); 
 
}

<nav> 
 
    <ul> 
 
    <li><a class="link" href="home.html">Home</a></li> - 
 
    <li><a class="link" href="code.html">Code</a></li> - 
 
    <li><a class="link" href="webpages.html">Webpages</a></li> - 
 
    <li><a class="link" href="articles.html">Articles</a></li> - 
 
    <li><a class="link" href="resume.html">Resume</a></li> 
 
    </ul> 
 
</nav>