I am looking to animate a font awesome pseudo element on my website.
Below is the HTML code I am working with:
<li class="has-submenu">
<a onclick="$(this).toggleClass('open').closest('.has-submenu').find('.submenu').toggleClass('closed')" class="parent" href="javascript:;">
<i class="fa fa-fw fa-file-text-o"></i> <span class="sidebar-collapse-hide">Reports</span>
</a>
<ul class="submenu">
<li>
<a href="/cases">
<i class="fa fa-fw fa-briefcase"></i> <span class="sidebar-collapse-hide">Cases</span>
</a>
</li>
<li>
<a href="/time">
<i class="fa fa-fw fa-clock-o"></i> <span class="sidebar-collapse-hide">Facility Time</span>
</a>
</li>
</ul>
</li>
If I have a pseudo element defined like this:
.parent:after {
content: '\f0da';
font-family:"FontAwesome";
position: absolute;
right: 15px;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
How can I make it so that when a class is added to the parent element, the content changes and animates?
.parent {
&.open:after {
content: '\f0d7'!important;
}
}
My goal is to have a right arrow for a menu item initially, then switch to a down arrow upon clicking by adding the 'open' class. I would like the animation to smoothly rotate the arrow from right to down. Is this achievable?