Есть иконки, на которой срабатывает анимация при наведении, добавил ссылки, но анимация их прячет, можно конечно увеличить время анимации и за это время успевать переходить по ссылке, но хотелось бы сделать переход ДО и ПОСЛЕ анимации, помогите, я новичок, всего неделю занимаюсь
<ul>
<li style="--clr:#ff0000"><a href="https://whatsapp.com" target="_blank"><i class="fa fa-whatsapp" aria-hidden="true"></i></a></li>
<li style="--clr:#dd2a7b"><a href="https://instagram.com" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li style="--clr:#1da1f2"><a href="https://vk.com" target="_blank"><i class="fa fa-vk" aria-hidden="true"></i></a></li>
</ul>
#logo {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
display: grid;
justify-content:center;
min-height: 100vh;
}
ul
{
margin-left: auto;
margin-right: auto;
position: relative;
display: flex;
gap: 35px;
}
ul li
{
position: relative;
list-style: none;
width: 120px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
cursor: pointer;
}
ul li .fa
{
font-size: 6em;
-webkit-text-stroke: 2px var(--clr);
color: transparent;
}
ul li::before
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
overflow: hidden;
border-bottom: 4px solid var(--clr);
transition: 0.5s ease-in-out;
font-family: fontAwesome;
text-align: center;
line-height: 120px;
font-size: 6em;
color: var(--clr);
}
ul li:hover::before{
height: 100%;
}
ul li:nth-child(1):before
{
content: '\f232';
}
ul li:nth-child(2):before
{
content: '\f16d';
}
ul li:nth-child(3):before
{
content: '\f189';
Средний
