Animacja :hover:after

Question

Witam,

 

W jaki sposób animować obiekty przy użyciu pseudoklas :before:after?

Poniższy kod niestety nie działa

 #menu>li>a {
     text-decoration: none;
     color: #f2f2f2;
       transform: skew(20deg);
     display: block;
    border-bottom: 2px solid transparent;
     position: relative;
     -webkit-transition: all 30s;
    transition: all 30s;
}

 #menu>li>a:hover:after
{
    border-bottom: 2px solid green;
    content: "";
    position: absolute;
    width: 100%;
    top: 20px;
    left: 0px;
    -webkit-transition: all 30s;
    transition: all 30s;
}

 

Answer 1

przykład:

<ul class="nav">
    <li class="nav__item">
        <a href="something.html" class="nav__link">
            Link 1
        </a>
    </li>
</ul>

/*pomijam stylowanie ul/li*/
.nav__link{
    padding: 3px;
    color: #333;
    text-decoration: none;
    position: relative;
}
.nav__link:after{
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;

    border-bottom: 2px solid transparent;
    transition: border-color 1s ease-in-out;
}
.nav__link:hover:after{
    border-color: green;
}