Greetings everyone, I apologize for any language barriers. The title may not be clear at first glance, so let me explain what I am attempting to achieve. I have a navigation menu structured like this:
<nav>
<ul>
<li><a href=""><?php echo __("home"); ?></a></li>
<li><a href=""><?php echo __("biography"); ?></a></li>
<li><a href=""><?php echo __("calendar"); ?></a></li>
<li><a href=""><?php echo __("archives"); ?></a></li>
<li><a href=""><?php echo __("programs"); ?></a></li>
</ul>
</nav>
My goal is to have an arrow appear on the left side of each navigation link when hovered over. Here is the CSS code I have implemented so far:
nav li a{
color: #747474;
font-size: 16px;
text-transform: capitalize;
}
nav li:hover:before{
content: '> ';
color: #fff;
}
While this code functions as intended, I attempted to add a transition effect to the appearance of the arrow in order to make it smoother and less abrupt. Unfortunately, my attempts were unsuccessful and I am unsure if this is even feasible. Although there may be alternative methods, I am eager to expand my expertise and comprehend how to successfully implement this feature.
I appreciate any assistance you can provide. Thank you in advance!