Is it possible to apply the transition property for ::hover and ::before at the same time, enabling dynamic changing of the width property? Right now, it only seems to work for hover.
.nav-list{
// border: 1px blue solid;
display: flex;
align-items: center;
list-style: none;
> li {
padding-right: 1.2rem;
> a {
position: relative;
text-decoration: none;
color: var(--Dark-grayish-blue);
&:hover{
color: rgb(0, 0, 0);
transition: all 0.5s; /* working here */
&::before{
position: absolute;
content: '';
left: 0;
top: 2.5rem;
width: 100%;
transition: width 3s; /* doesn't work here */
height: .3rem;
border-radius: .1rem;
background: var(--Orange);
}
}
}
}
}<ul class="nav-list">
<li class="item"><a href="#Collections" class="link">Collections</a></li>
<li class="item"><a href="#Men" class="link">Men</a></li>
<li class="item"><a href="#Women" class="link">Women</a></li>
<li class="item"><a href="#About" class="link">About</a></li>
<li class="item"><a href="#Contact" class="link">Contact</a></li>
</ul>