下線を引きたくない場所にまで下線が引かれる

<h3 class="faq-itemTtl">のテキストのみにhover時に下線を引きたいのですが、<i class="far fa-question-circle">のところにまで引かれてしまいます。 jsが原因でi要素に対してcssを指定しても効かず、思うようにいきません。どのようにすれば上手くいくのでしょうか？テキストを<span>でマークアップする等して対応するしかないのでしょうか？

なにか良い案があれば教えていただきたいです。

html
1        <section class="faq">
2            <div class="faq-inner">
3                <h2 class="faq-ttl"><i class="far fa-envelope-open"></i>よくある質問</h2>
4                <div class="faq-box">
5                    <ul class="faq-list">
6                        <li class="faq-item">
7                            <h3 class="faq-itemTtl"><i class="far fa-question-circle"></i>プログラミングスキルは必要ですか？</h3> <!--ここです-->
8                            <p class="faq-itemTxt">
9                                いいえ、必要ありません。しかし、iSaraでは参加費以上の金額が稼げることを保障しています。
10                                従って、事前通話面談時点で簡単なテストを実施し、場合によってはお断りをしております。
11                                この点だけはご了承ください。
12                            </p>
13                        </li>
14                        <li class="faq-item">
15                            <h3 class="faq-itemTtl"><i class="far fa-question-circle"></i>参加費以上に稼げなかったらどうなりますか？</h3> <!--ここです-->
16                            <p class="faq-itemTxt">
17                                参加費である258,000円以上の金額をトータルで稼ぐまで、無期限でサポート延長いたします。
18                                （講座参加後、週30時間以上の実践をすることと、週１回の実践報告をすることが延長条件です。）
19                                きちんと学び実践すれば、フリーランスでも収入を作ることは十分に可能です。
20                            </p>
21                        </li>
22                     ・・・
23　　　　　 </section>

scss
1// faq
2.faq-inner {
3  padding: 17px;
4  font-weight: 600;
5  .faq-ttl {
6    font-size: 1.8rem;
7    line-height: 2.2;
8    font-weight: 600;
9    text-align: center;
10    i {
11      font-size: 1.6rem;
12      margin-right: 3px;
13    }
14  }
15}
16.faq-box {
17  .faq-list {
18    margin: 20px 0;
19  }
20}
21.faq-item {
22  border-radius: 3px;
23  box-shadow: 0 1px #F3F3F3;
24  cursor: pointer;
25  &:not(:last-of-type) {
26    margin-bottom: 5px;
27  }
28  .faq-itemTtl {
29    font-size: 1.5rem;
30    line-height: 1.1;
31    font-weight: 600;
32    border: 1px solid #E5E5E5;
33    padding: 11px;
34    letter-spacing: .1em;
35    display: flex;
36    align-items: center;
37    position: relative;
38    &::after {
39      content: "";
40      width: 7px;
41      height: 7px;
42      border-bottom: 4px solid #E5E5E5;
43      border-right: 4px solid #E5E5E5;
44      position: absolute;
45      transform: rotate(45deg);
46      right: 15px;
47    }
48    &.add-active {
49      &::after {
50        content: "";
51        border-bottom: none;
52        border-right: none;
53        border-top: 4px solid #E5E5E5;
54        border-right: 4px solid #E5E5E5;
55        transform: rotate(-45deg);
56      }
57    }
58    i {
59      color: #026EA8;
60      font-size: 1.3rem;
61    }
62  }
63  .faq-itemTxt {
64    font-size: 1.2rem;
65    line-height: 1.6;
66    letter-spacing: .1em;
67    padding: 20px;
68    padding-top: 0;
69    display: none;
70    &::before {
71      content: "";
72      display: block;
73      width: 100%;
74      height: 20px;
75    }
76  }
77}

js
1    // faq
2    $('.faq-item').on('click', function(){
3        $(this).find('.faq-itemTxt').stop().slideToggle(250);
4        $(this).find('.faq-itemTtl').toggleClass('add-active');
5    });
6    $('.faq-item').hover(
7        function() {
8            $(this).find('.faq-itemTtl').css('text-decoration', 'underline');
9        },
10        function() {
11            $(this).find('.faq-itemTtl').css('text-decoration', 'none');
12        }
13    );