変更：beforeの要素がホバリングしていないとき

Question

私のアンカーの上にホバーするたびに高さを変更したいのですが、うまくいかない場合は、単に:before（アンダーライン）

誰かが私を助けてくれることを願っています。前もって感謝します。

.wrapper { 
 
\t width: 100vw; 
 
\t height: 100vh; 
 
\t display: flex; 
 
\t align-items: center; 
 
\t justify-content: center; 
 
} 
 

 
a { 
 
\t display: inline-block; 
 
\t text-decoration: none; 
 
\t font: 4em Arial; 
 
\t color: #21a1e1; 
 
\t font-weight: 300; 
 
\t position: relative; 
 
} 
 

 
a:before { 
 
\t content: ''; 
 
\t position: absolute; 
 
\t display: block; 
 
\t width: 100%; 
 
\t height: 2px; 
 
\t bottom: 0; 
 
\t background: #21a1e1; 
 
\t transition: all .3s ease-in-out; 
 
} 
 

 

 
/* not working */ 
 
a:hover a:before { 
 
\t height: 4px; 
 
}

<div class="wrapper"> 
 
\t <a href="">Hover</a> 
 
</div>

Answer 1

使用：ホバー::代わりの前：ホバー：前に、私は以下の作業スニペットを追加しています。

.wrapper { 
 
\t width: 100vw; 
 
\t height: 100vh; 
 
\t display: flex; 
 
\t align-items: center; 
 
\t justify-content: center; 
 
} 
 

 
a { 
 
\t display: inline-block; 
 
\t text-decoration: none; 
 
\t font: 4em Arial; 
 
\t color: #21a1e1; 
 
\t font-weight: 300; 
 
\t position: relative; 
 
} 
 

 
a:before { 
 
\t content: ''; 
 
\t position: absolute; 
 
\t display: block; 
 
\t width: 100%; 
 
\t height: 2px; 
 
\t bottom: 0; 
 
\t background: #21a1e1; 
 
\t transition: all .3s ease-in-out; 
 
} 
 

 

 
/* not working */ 
 
a:hover::before { 
 
\t height: 4px; 
 
}

<div class="wrapper"> 
 
\t <a href="">Hover</a> 
 
</div>