0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Rails】お気に入り(いいね)のハートアイコンとカウント数の間に謎の下線、消し方(メモ)

Posted at

# 目標

このハートアイコンとカウント数の間にある下線を消す。

スクリーンショット 2021-08-25 3.00.55.png

likes.html.erb
<p>お気に入り一覧</p>
      
<% @like_posts.each do |post| %>
  <% if logged_in? %>
    <% if current_user.like?(post) %> 
        <%=link_to post_likes_path(post), method: :delete do %>
           <i class="fas fa-heart unlike-btn"></i>
         <% end %>
     <% else %>
        <%=link_to post_likes_path(post), method: :post do %>
           <i class="fas fa-heart like-btn"></i>
        <% end %>
     <% end %>
         <%= post.likes.count %>
  <% end %>

html.erbの記述にアンダーバーが入り込んでるのかとか記述ミスなのか何度も見直したのですが異変は見当たらず、最終的にview側から検証してみることにしました。

するとa要素という存在に気が付きました。(リンクのアンカー)

スクリーンショット 2021-08-25 2.20.19.png

調べてみるとcssでtext-decoration を使って消せそうということがわかったので

css
a{
  text-decoration: none;
}

値にnoneと入れて確認したら無事下線が消えてました。
単純内容なのですがアイコンがリンクになっているをうっかりしていました、それに検証を忘れがちな自分のためにも備忘録として残しておきます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?