liタグで作成したリンクの下線がtext-decorationで消せない

はじめに

前提条件
railsでのアプリケーション作成

エラー？

下記のように確かにliタグに対してtext-decorationを設定しているのに適用されない

application.html.erb

<ul class="lists">
 <li class="list"><%= link_to "エクササイズ", "#" %></li>
</ul>

application.scss

.lists {
  display: flex;
  align-items: center;
  list-style: none;
}

.list {
  padding: 1px 20px;
  border-right: 1px solid black;
  text-decoration: none;
  color: #433f3f;
}

解決方法

liタグではなくlink_toメソッドにclassを設定

application.html.erb

<ul class="lists">
 <li><%= link_to "エクササイズ", "#", class: "list" %></li>
</ul>

scssは特に変更する必要なし

これでliタグ内のリンクの下線を消せるようになると思います。