Is it possible to animate an ::after based on a changing class? - css

Question

I have a few elements
<div class="nav-link active"><span>Element 1</span></div>
<div class="nav-link"><span>Element 2</span></div>
<div class="nav-link"><span>Element 3</span></div>
where the active would change on click and css to add a red rhombus underneath the active div:
.nav .nav-link.active span::after{
content: "";
width: 120%;
height: 0.14em;
background: red;
transform: skewX(-45deg);
list-style: 0.5em;
display: block;
margin: 0 auto;
position: relative;
left: -20px;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
and would like to change the position of that red rhombus on the .nav-link by having it animate slide in from the left based on if the div contains .active. However adding:
.nav .nav-link span::after{
left: -200px;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
doesn't appear to work. Is this possible or am I taking the wrong approach?

Answer 1

You can used translateX to animated left slide.
.nav .nav-link.active span::after{
content: "";
width: 120%;
height: 0.14em;
background: red;
transform: skewX(-45deg) translateX(100px);
list-style: 0.5em;
display: block;
margin: 0 auto;
position: relative;
left: -20px;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
<div class="nav">
<div class="nav-link active"><span>Element 1</span></div>
<div class="nav-link"><span>Element 2</span></div>
<div class="nav-link"><span>Element 3</span></div>
</div>