ホバー時のアンダーラインを実装したい

ナビゲーションメニューで、ホバーしたらアンダーラインをふわっと表示させ、クリックするとアンダーライン表示を固定する方法を知りたいです。

以下のコードだと、クリックした後にカーソルを離すとアンダーラインが消えてしまいます。

html
1<ul>
2<li><a href="#">HOME</a></li>
3<li><a href="#">ABOUT</a></li>
4<li><a href="#">ADDRESS</a></li>
5<li><a href="#">CONTACT</a></li>
6</ul>

jQuery
1$('ul li a').click(function(){
2  $('ul li a').removeClass('underline');
3  $(this).addClass('underline');
4});

css
1ul li a {
2  position: relative;
3}
4
5ul li a.underline:after {
6  position: absolute;
7  content: '';
8  width: 100%;
9  height: 1px;
10  background-color: #000000;
11  left: 0;
12  bottom: -1px;
13}
14
15ul li a:after {
16  position: absolute;
17  content: '';
18  width: 100%;
19  height: 1px;
20  background-color: #000000;
21  left: 0;
22  bottom: -1px;
23  transition: 0.5s;
24  opacity: 0;
25}
26
27ul li a:hover:after {
28  opacity: 1;
29}

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1ul li a.underline:after {
2  opacity: 1; /* これを追加してみてください */
3  position: absolute;
4  content: '';
5  width: 100%;
6  height: 1px;
7  background-color: #000000;
8  left: 0;
9  bottom: -1px;
10}