I have nav-menu with hover efect underline the text looking like this. I would like to keep the underline after clicking and opening that page.
Problem is that the underline is through ::after element (because I want the line appears from the middle to the edges). I tried to apply this example: http://jsfiddle.net/amoljawale/5SAv5/2/ but after opening the page it is not underlined. (jQuery link before tag included)
My code is:
<nav class="nav2">
<ul class="nav2-ul">
<li><a class="nav2-a" href="index.html">Domů</a></li>
<li><a class="nav2-a" href="about_us.html">O nás</a></li>
<li><a class="nav2-a" href="#contact">Kontakt</a></li>
</ul>
</nav>CSS:
.nav2-a::after {
content: "";
position: absolute;
height: calc(var(--breakpoint_unit) * calc(0.7*var(--basic_unit)));
width: 100%;
bottom: 0;
left: 0;
background: var(--invert_text_color);
transform: scaleX(0);
transition: transform 700ms ease;
}
.nav2 li:hover .nav2-a::after {
transform: scaleX(1);
}
.nav2-a.active::after {
transform: scaleX(1);
}And JS:
$(".nav2-a").click(function() {
$(".nav2-a").removeClass("active");
$(this).addClass("active");
});Thanks a lot for your ideas!