修改：徘徊之前元素不工作

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>