link_toを使った後の下線が消えない

Question

link_toを用いて、リンクパスを指定しました。
下記のようなコードになったのですが、
font awesomeを使用していて、font awesomeの下に下線ができました。

.tweets
  = link_to new_tweets_path do
    %i.fas.fa-pen

font awesomeのscssはこのようになっています。

.fa-pen {
  line-height: 90px;
  text-align: center;
  display: block;
  font-size: 30px;
  color: white;
  text-decoration: none;
}

text-decoration: none;

これを当ててみても下線は消えません。
一体、何が原因でしょうか？
ご回答お願い致します。

Answer 1

a要素に対してこのプロパティ（値 none）を設定すると、リンクテキストの下線を消すことができます。

https://www.tagindex.com/stylesheet/link/text_decoration.html

<%= link_to ******,class:"no-underline" %>

.no-underline{text-decoration:none !important;}

Comments

[yume0409]

ありがとうございます！
aに指定してtext-decoration:none;を当てたら消えました。
font awesomeはiタグにも関わらず、何故aタグで消えたのでしょうか。。。？

[no1knows]

aタグに下線のCSSがあり、その中の要素に反映されていたためです。
たとえば下記のようにしても、「あいうえお」に下線が付くので確認いただくとよいかと思います。
<a href="/">あいうえお</a>

[yume0409]

なるほど！
ありがとうございました！