I've utilized the :after and :before pseudo-elements to create a border effect when hovering over the navigation links. I've been trying to achieve the same border effect in the :active pseudo-class as well. Can someone please guide me on how to accomplish this? Below is the code snippet I have been working on:
nav ul .u {
position: relative;
color: f4f4f4;
}
nav ul li a:after,
nav ul li a:before {
content: " ";
position: absolute;
display: block;
width: 0;
height: 2px;
transition: width .2s;
}
nav ul li a:after {
left: 10%;
bottom: -5px;
background-color: #f1c40f;
}
nav ul li a:before {
right: 10%;
top: -5px;
background-color: #f1c40f;
}
nav ul li a:hover {
color: #F4F4F4;
}
nav ul li a:hover:before,
nav ul li a:hover:after {
width: 80%;
}
nav ul .active a:after,
nav ul .active a:before {
content: " ";
position: absolute;
display: block;
width: 0;
height: 2px;
transition: width .3s;
}
nav ul .active a:after {
left: 10%;
bottom: -5px;
background-color: #f1c40f;
}
nav ul .active a:before {
right: 10%;
top: -5px;
background-color: #f1c40f;
}<nav>
<ul>
<li class="active"><a class="u" href="#">Home</a></li>
<li><a class="u" href="#">About</a></li>
<li><a class="u" href="#">Specials</a></li>
</ul>
</nav>