aタグの下線の消し方
こんばんは。
応用カリキュラムの課題を昨日提出したところ、
1カ所修正が必要でした。
何度か出会ったことのある問題なのですが、毎回忘れてもたついてしまうので
今回は自分用メモとして記しておきます。
それがこちら↓
「文字色を白色にして下線を無くしましょう」
問題: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;
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は同じ
できたーーーー!!!!
原因
text-decoration:none; は下線を消したい要素(aタグ)に直接指定する。
親要素に指定しても効かない。