【回答】text-decorationの適用について

問題

aタグで表示するリンクのアンダーラインを消すために「text-decoration」を設定しましたが、うまくいきませんでした。その原因と対処策について説明して下さい。

前提条件：Ruby on Railsでhamlを使用

html.haml

%html
    %head
    省略
    %body
        .content
            .text-deco-none
                = link_to "aタグテスト", testlink_path

scss

.content {
  padding: 50px;
}
.text-deco-none {
  text-decoration: none;
}

表示：アンダーラインが消せない

回答

aタグ、今回はlink_toに直接クラスを設定すれば、アンダーラインを消すことができます。

html.haml

%html
    %head
    省略
    %body
        .content
            = link_to "aタグテスト", testlink_path, class: text-deco-none

aタグに直接「text-decoration: none;」を設定するのがポイント。div要素に設定してそれで囲ってもダメ。

その他のtext-decorationのおもしろい動き

• 親要素で指定されたtext-decorationは子要素で解除できない
• inline-boxだとtext-decorationが適用されない

参考URL 

text-decoration - CSSリファレンス | WWWクリエイターズ

text-decoration の子要素への適用のされかた | masuP.net

テストした時のコード

%p テスト１
    .text-deco-none
      = link_to "aタグテスト", htmltest3_path
      %p pタグテスト
      %span spanテスト
    %br
    %p テスト２
    .text-deco-none
      = link_to "aタグテスト", htmltest3_path, class: "text-deco-none"
      %p pタグテスト
      %span spanテスト
    %br
    %p テスト３
    .text-deco-under
      = link_to "aタグテスト", htmltest3_path
      %p pタグテスト
      %span spanテスト
    %br
    %p テスト４
    %span.text-deco-under
      spanテスト
      .inline-block
        spanテスト（インラインブロック）
      .block
        spanテスト（ブロック）
    %br
    %p テスト５
    .text-deco-line
      = link_to "aタグテスト", htmltest3_path, class: "text-deco-none"
      %p.text-deco-none pタグテスト
      %span.text-deco-none spanテスト
    %br
    %p テスト６
    = link_to htmltest3_path, class: "block2" do
      aタグテスト
      %p.text-deco-line pタグテスト
      %p.text-deco-under pタグテスト
    %br

.content {
  padding: 50px;
}
.text-deco-none {
  text-decoration: none;
}
.text-deco-under {
  text-decoration: underline;
}
.text-deco-line {
  text-decoration: line-through;
}
.inline-block {
  display: inline-block;
}
.block {
  display: block;
}
.block2 {
  display: block;
  text-decoration: none;
  height: 120px;
  width: 120px;
  background-color: skyblue;
}