I'm currently implementing a CSS code snippet I found on CodePen to create a unique underline effect for the menu on my website. The goal is to move away from the traditional link underline style.
At the moment, the underline appears when hovering with a subtle animation effect. However, I would like it to be activated when the link is active instead of just on hover. Despite my attempts to modify the code, I find myself stuck due to not being the original creator of the underline code.
Is there anyone who can assist me with this issue? I apologize if my explanation seems messy, and I am willing to provide additional snippets of code if necessary. Thank you!
Below is the code I am using:
HTML:
<nav>
<ul>
<li class="item"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
CSS (Code from CodePen):
a:link {
text-decoration: none!important;
}
nav li a {
color: #fff;
font-size: 14px;
position: relative;
letter-spacing: 2px;
text-transform: uppercase;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
padding: 15px;
}
a:after {
content: "";
position: absolute;
height: 2px;
background-color: white;
width: 0;
left: 50%;
bottom: 0;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) all;
transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) all;
}
a:hover {
color: tomato;
}
a:hover:after {
width: 100%;
}