kabukabutan’s blog

プログラミングのことを書きます。自己満足です。

aタグの下線の消し方

こんばんは。

 

応用カリキュラムの課題を昨日提出したところ、

1カ所修正が必要でした。

 

何度か出会ったことのある問題なのですが、毎回忘れてもたついてしまうので

今回は自分用メモとして記しておきます。

 

それがこちら↓

ChatSpace

 

「文字色を白色にして下線を無くしましょう」

 

 

問題:aタグの下線を消したい 

 html.haml 

 
.side-bar__group-lists
- current_user.groups.each do |group|
.group-list
= link_to group_messages_path(group) do
.group-list__group-name
= group.name
.group-list__group-message
= group.show_last_message

 

scss

 
.group-list {
margin-bottom: 40px;
text-decoration: none;
color: white;
&__group-name {
font-size: 15px;
margin-bottom: 5px;
}
&__group-message {
font-size: 12px;
display: flex;
li {
margin-left: 5px;
list-style: none;
}
}
}

 

検証ツールで下線を消したい部分のクラスを調べ、text-decoration: none; とcolor: white; を追加

 

・・・消えてない。

 

解決策

aタグ(ここではlink_to)にクラスを追加し、そのクラスに対してtext-decoration: none; とcolor: white; を追加

 

 html.haml 

 
.side-bar__group-lists
- current_user.groups.each do |group|
= link_to group_messages_path(group), class: "group-list" do
.group-list__group-name
= group.name
.group-list__group-message
= group.show_last_message
 

 

scssは同じ 

 

Image from Gyazo

 

 

できたーーーー!!!! 

 

原因

text-decoration:none; は下線を消したい要素(aタグ)に直接指定する。

親要素に指定しても効かない。