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>

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

I tried this:
 color: #333;
 margin: 20px;
 text-decoration: none;

 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