How to cross out text when clicking on it?

I have a navbar:
<nav class="nav">
 <a class="nav__link" href="#">Home</a>
 <a class="nav__link" href="#">Lives</a>
 <a class="nav__link" href="#">Albums</a>
 <a class="nav__link" href="#">News</a>
 <a class="nav__link" href="#">About</a>
 </nav>


When you click on Albums (selected current page), the text is crossed out like this:
5e13774904160070481143.png

I tried this:
.nav__link{
 color: #333;
 margin: 20px;
 text-decoration: none;
}

.nav__link::before{
 content: ";
 position: absolute;
 width: 100%;
 height: 2px;
 background: #fff;
 top: 47%;
 animation: out 0.2 s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}

But, unfortunately, nothing came of it. I am new to web programming, could you help me?
April 4th 20 at 00:58
1 answer
April 4th 20 at 01:00
from .nav__link need to add position: relative; .nav__link::before in a separate class .nav__link--active:before on click, add this class .nav__link--active tipo $('.nav__link').click(function() { $(this).addClass('nav__link--active'); });

Find more questions by tags CSSHTML